目錄介紹
1.WebView和Js交互方式
2.Android調用JS腳本
3.JS調用Android方法
4.Android 調用HTML中的javascript腳本并傳遞參數
5.HTML中的javascript腳本調用Android本地代碼并傳遞參數
6.案例：H5頁面點擊圖片監(jiān)聽圖片鏈接地址
好消息
- 博客筆記大匯總【16年3月到至今】，包括Java基礎及深入知識點，Android技術博客兆衅，Python學習筆記等等阀蒂，還包括平時開發(fā)中遇到的bug匯總，當然也在工作之余收集了大量的面試題，長期更新維護并且修正，持續(xù)完善……開源的文件是markdown格式的！同時也開源了生活博客刃跛，從12年起，積累共計47篇[近20萬字]苛萎，轉載請注明出處桨昙，謝謝！
- 鏈接地址：https://github.com/yangchong211/YCBlogs
- 如果覺得好腌歉，可以star一下蛙酪，謝謝！當然也歡迎提出建議翘盖，萬事起于忽微桂塞，量變引起質變！
1.WebView和Js交互的幾種方式
Android去調用JS的代碼
JS去調用Android的代碼
對于android調用JS代碼的方法有2種：
1. 通過WebView的loadUrl（）
2. 通過WebView的evaluateJavascript（）
對于JS調用Android代碼的方法有3種：
1. 通過WebView的addJavascriptInterface（）進行對象映射
2. 通過 WebViewClient 的shouldOverrideUrlLoading ()方法回調攔截 url
3. 通過 WebChromeClient 的onJsAlert()馍驯、onJsConfirm()阁危、onJsPrompt（）方法回調攔截JS對話框alert()、confirm()汰瘫、prompt()消息
2. Android調用JS腳本
對于Android調用JS代碼的方法有2種：
- 通過WebView的loadUrl（）
- 通過WebView的evaluateJavascript（）
**通過WebView的evaluateJavascript()**
優(yōu)點：該方法比第一種方法效率更高狂打、使用更簡潔。
1. 因為該方法的執(zhí)行不會使頁面刷新混弥，而第一種方法（loadUrl ）的執(zhí)行則會趴乡。
2. Android 4.4 后才可使用
//只需要將第一種方法的loadUrl()換成下面該方法即可
mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此處為 js 返回的結果
}
});
**通過WebView的loadUrl()**
直接Webview調用loadUrl方法，里面是JS的方法名，并可以傳入參數晾捏，javascript：xxx()方法名需要和JS方法名相同
contentWebView.loadUrl("javascript:javacalljs()");
HTML代碼
使用建議
兩種方法混合使用蒿涎，即Android 4.4以下使用方法1，Android 4.4以上方法2
//Android版本變量
final int version = Build.VERSION.SDK_INT;
//因為該方法在 Android 4.4 版本才可使用惦辛，所以使用時需進行版本判斷
if (version < 18) {
mWebView.loadUrl("javascript:callJS()");
} else {
mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此處為 js 返回的結果
}
});
}
3. JS調用Android方法
在Java代碼中添加下面這句劳秋，webview綁定javascriptInterface，js腳本通過這個接口來調用java代碼裙品， 第一個參數是自定義類對象，映射成JS對象俗或，這里我直接傳this市怎，第二個參數是別名，JS腳本通過這個別名來調用java的方法辛慰，這個別名跟HTML代碼中也是對應的区匠。
contentWebView.addJavascriptInterface(MainActivity.this,"android");
HTML代碼
4.Android 調用HTML中的javascript腳本并傳遞參數
WebView.loadUrl("javascript:javacalljswith(" + "'http://blog.csdn.net/Leejizhou'" + ")");
HTML代碼
5. HTML中的javascript腳本調用Android本地代碼并傳遞參數
Android Java代碼
@JavascriptInterface
public void startFunction(final String text){
runOnUiThread(new Runnable() {
@Override
public void run() {
new AlertDialog.Builder(WebViewFiftyActivity.this).setMessage(text).show();
}
});
}
HTML代碼
function javacalljswith(arg){
document.getElementById("content").innerHTML =
("<br\>"+arg);
}
6.案例：H5頁面點擊圖片監(jiān)聽圖片鏈接地址
settings.setJavaScriptEnabled(true);
wv_view.addJavascriptInterface(new ImageJs(this),"imageListener");
/**打開圖片js通信接口*/
private class ImageJs {
private final Activity activity;
public ImageJs(Activity activity) {
this.activity = activity;
}
// 下面的@SuppressLint("JavascriptInterface")最好加上。防止在某些版本中js和java的交互不支持帅腌。
//@SuppressLint("JavascriptInterface")
@android.webkit.JavascriptInterface
public void openImage(String img) {
Log.i("url地址","圖片"+ img);
**//跳轉頁面**
}
}
/**添加圖片點擊事件的js代碼驰弄，網上找到，就是這樣寫速客，不需要明白*/
private void addImageClickListner() {
String jsCode="javascript:(function(){" +
"var imgs=document.getElementsByTagName(\"img\");" +
"for(var i=0;i<imgs.length;i++){" +
"imgs[i].onclick=function(){" +
"window.imageListener.openImage(this.src);" + //imageListener自定義戚篙，openImage要與js通信接口相同
"}}})()";
wv_view.loadUrl(jsCode);
}
后續(xù)：
知乎：https://www.zhihu.com/people/yang-chong-69-24/pins/posts
領英：https://www.linkedin.com/in/chong-yang-049216146/
簡書：http://www.reibang.com/u/b7b2c6ed9284
csdn：http://my.csdn.net/m0_37700275
網易博客：http://yangchong211.blog.163.com/
新浪博客：http://blog.sina.com.cn/786041010yc
github：https://github.com/yangchong211
喜馬拉雅聽書：http://www.ximalaya.com/zhubo/71989305/
