Android实现WebView和Js交互
Posted lxn_李小牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android实现WebView和Js交互相关的知识，希望对你有一定的参考价值。
概述
今天来看看WebView和Js的交互功能如何实现
效果图
代码
首先我们需要准备一个html文件，放在assets目录中，方便我们从代码中加载，html的代码如下
<html>
<head>
<title>WebView和Js交互</title>
<script type="text/javascript">
function updateHtml()
document.getElementById("content").innerHTML = "android调用了js的update方法";
</script>
</head>
<body>
<a onClick="window.android.showToast()" href="#">调用android方法</a><br/>
<span id="content"></span>
</body>
</html>updateHtml方法是被Android调用的，用来更新当前页面的内容
a标签里我们指定了一个onClick属性，它的值是window.android.showToast(),其中android是我们定义的一个对象，通过下面的代码指定
webView.addJavascriptInterface(new JavaScriptInterface(),"android");addJavaScriptInterface这个方法接收两个参数，第一个指定注入到JavaScript中的Java对象，第二个参数是这个参数的名字，通过window.name.methodName，我们就可以在js中调用android的方法了
showToast是我们在Android中定义的一个方法，Js调用
/**
* webview和js交互
*/
public class WebJsActivity extends AppCompatActivity
private static final String TAG = "WebJsActivity";
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web_js);
webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("file:///android_asset/demo.html");
webView.addJavascriptInterface(new JavaScriptInterface(),"android");
public void updateJs(View view)
// webView.loadUrl("javascript:updateHtml()");//js方法无返回值
//有返回值处理
if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT)
webView.evaluateJavascript("javascript:updateHtml()", new ValueCallback<String>()
@Override
public void onReceiveValue(String value)
System.out.println("==========" + value);
);
else
//19之前java调用js方法，js在调用java方法把返回值传过来
public class JavaScriptInterface
@JavascriptInterface
public void showToast()
Toast.makeText(WebJsActivity.this, "被JS调用了", Toast.LENGTH_SHORT).show();
这里我们注意到，Android中的方法加入了一个@JavascriptInterface注解，因为js可以通过反射调用我们的android代码，这样是有安全隐患的，谷歌为了安全，从API17开始，只有添加了这个注解的java方法才能够被js调用，那么API17以下我们想要实现交互，又不发生安全漏洞，要怎么做呢？其实js还有另一种方式调用android代码，
我们稍微修改下js的代码
<html>
<head>
<title>WebView和Js交互</title>
<script type="text/javascript">
function updateHtml()
document.getElementById("content").innerHTML = "android调用了js的update方法";
return "success";
function callAndroid()
document.location = "abc://webview?age=1&name=lxn";
</script>
</head>
<body>
<a onClick="callAndroid()" href="#">调用android方法</a><br/>
<span id="content"></span>
</body>
</html> //WebChromeClient主要处理js的对话框
webView.setWebChromeClient(new WebChromeClient()
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result)
return super.onJsAlert(view, url, message, result);
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result)
return super.onJsPrompt(view, url, message, defaultValue, result);
);
//WebViewClient主要处理各种通知，事件
webView.setWebViewClient(new WebViewClient()
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url)
checkUri(Uri.parse(url));
return true;
);
public void checkUri(Uri uri)
Log.d(TAG, "shouldOverrideUrlLoading: " + uri.getScheme());
Log.d(TAG, "shouldOverrideUrlLoading: " + uri.getAuthority());//webview
String age = uri.getQueryParameter("age");//1
String name = uri.getQueryParameter("name");//lxn
Log.d(TAG, "shouldOverrideUrlLoading: " + age +"--"+name);
if (uri.getScheme().equals("abc"))
//这里调用android的方法
Toast.makeText(this, "通过url调用", Toast.LENGTH_SHORT).show();
以上是关于Android实现WebView和Js交互的主要内容，如果未能解决你的问题，请参考以下文章