使用场景
在页面布局很复杂并且是动态的时候，比如很多电商平台的宣传页面等；
交互方式
- Android去调用JS的代码
- JS去调用Android的代码
实例
- android端代码
public class NativeJSCs extends AppCompatActivity {
private WebView web;
private String yaoQingMa = "YAOQINGMA";
//String nativeUrl = "https://www.jianshu.com/sign_in"; //互联网页面直接用
String nativeUrl = "file:///android_asset/web.html"; //本地文件用(本地文件存放在：assets文件中)
//String htmlString = "<h1>Title</h1><p>This is HTML text<br /><i>Formatted in italics</i><br />Anothor Line</p>"; //直接载入html的字符串
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.native_js_cs);
initView();
}
private void initView() {
web = (WebView) findViewById(R.id.web_js);
//必须支持JavaScript脚本
web.getSettings().setJavaScriptEnabled(true);
//为js回调Android方法做准备（绑定别名）
web.addJavascriptInterface(new NativeJSCs.JavaScriptInterface(), "android");
// 设置允许JS弹窗
web.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
web.clearCache(true);
// 加载html
web.loadUrl(nativeUrl);
web.setWebViewClient(new WebViewClient() {
@Override public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
//Android调用js带参方法,需特别注意 单引号 ‘’ 的使用
loadUrl("javascript:androidCallJs('" + "Android->成功" + "')");
}
@Override public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
//view.loadUrl(url); //return true时，添加该方法webView中的超链接才可以进行二次跳转访问
//返回true代表当前应用来处理url，返回false则代表当前webview来处理url
//（若webview来处理，在数据获取失败时，与view.loadUrl(url);现象不同的是，它不会跳转到新页面）
return false;
}
});
}
private void loadUrl(String url) { //仅用于js交互使用
if (Build.VERSION.SDK_INT < 19) { // Android版本变量
//采用无返回结果的调用js方法
web.loadUrl(url);
} else {
//采用有返回结果的调用js方法
web.evaluateJavascript(url, new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//注意：此处为 js 返回的结果
}
});
}
}
public void onClicked(View v) {
String url = "javascript:android.startFunction(androidCallJs('" + "Android->Js->Android 成功" + "'));";
loadUrl(url);
loadUrl("javascript:androidCallJs('" + "are you superman ???" + "')");
}
/**
* 用WebView点链接看了很多页以后为了让WebView支持回退功能，需要覆盖覆盖Activity类的onKeyDown()方法，
* 如果不做任何处理，点击系统回退剪键，整个浏览器会调用finish()而结束自身，而不是回退到上一页面
**/
public boolean onKeyDown(int keyCode, KeyEvent event) {
super.onKeyDown(keyCode, event);
if ((keyCode == KeyEvent.KEYCODE_BACK) && web.canGoBack()) {
web.goBack(); //goBack()表示返回WebView的上一页面
finish();
return true;
}
return true;
}
private class JavaScriptInterface {
@JavascriptInterface // Android 4.4后必要注解，用于提高安全性
public void startFunction() { //js回调Android方法, Toyun.callCamera()；
Toast.makeText(NativeJSCs.this, "js回调Android成功！", Toast.LENGTH_SHORT).show();
}
@JavascriptInterface
public void startFunction(final String result) {
//对界面进行修改时必须在UI线程进行，即便它是Html的界面，因此可以用handler或如下方法去更新UI
runOnUiThread(new Runnable() {
@Override public void run() {
Toast.makeText(NativeJSCs.this, result, Toast.LENGTH_SHORT).show();
}
});
}
}
}
- js代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<script type="text/javascript">
<!--当方法名相同时，不管有无参数都调用最后一个-->
function androidCallJs(){
document.getElementById("content").innerHTML ="<br\>1 web页面加载完毕";
}
function androidCallJs(arg){
document.getElementById("content").innerHTML ="<br\>2 web页面加载完毕";
return arg;
}
function shareCallBack(arg){
document.getElementById("content").innerHTML =
("<br\>"+arg);
}
function cfm() {
confirm("")
}
function pmt() {
prompt("","");
}
function onAlert()
{
alert("这是网页中的alert方法，如果重写了mWebView的onAlert方法，该方法不会执行");
}
</script>
</head>
<body>
HTML 内容显示: <br/>
<h1>
<div id="content">content</div>
</h1>
<br/>
<input type="button" value="调用Android方法"
onclick="window.android.startFunction()"/>
<br/>
<br/>
<input type="button" value="调用Android方法并传参"
onclick="android.startFunction('Android方法被js调用，并传参成功')"/>
<p><input type="button" onclick="cfm()" value="Confirm"/></p>
<p><input type="button" onclick="pmt()" value="Prompt"/></p>
<p><input type="button" onclick="onAlert()" value="Alert"/> <br/>
</body>
</html>
其它
-
WebViewClient与WebChromeClient的区别
-
WebViewClient主要帮助WebView处理各种通知、请求事件的，比如：
onLoadResource
onPageStart
onPageFinish
onReceiveError
onReceivedHttpAuthRequest -
WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等，比如
onCloseWindow(关闭WebView)
onCreateWindow()
onJsAlert (WebView上alert无效，需要定制WebChromeClient处理弹出)
onJsPrompt
onJsConfirm
onProgressChanged
onReceivedIcon
onReceivedTitle
小结：如果你的WebView只是用来处理一些html的页面内容，只用WebViewClient就行了，如果需要更丰富的处理效果，比如JS、进度条等，就要用到WebChromeClient。
当然，你也可以都用，详情网址：http://blog.csdn.net/wang1897b7/article/details/53559146。 -
-
更详细的Android WebView与 JS 的交互方式介绍：
.
网友评论