Android webview和js的互動
摘要：
參考資料
前言：此篇文件出於對上述資料的學習總結以及補充，由於涉及載入本地html檔案，所以也說明一下建立檔案方法，好了廢話就這麼多。
assets資料夾以及html檔案的建立方法
1.目錄結構
在Android模式下，與java資料夾在同一目錄下
...
ofollow,noindex">參考資料
前言：此篇文件出於對上述資料的學習總結以及補充，由於涉及載入本地html檔案，所以也說明一下建立檔案方法，好了廢話就這麼多。
assets資料夾以及html檔案的建立方法
1.目錄結構
在Android模式下，與java資料夾在同一目錄下
目錄.jpg
2.建立方法
指定目錄下->右鍵new->Folder->assets Folder
然後在建立的新資料夾中新建file檔案，選取html檔案型別即可。
webview和js的互動
1.android呼叫js中的程式碼
mWebview.loadUrl()
mWebview.evaluateJavascript()
具體使用摘錄大神程式碼
if (version < 18) {
myWebview.loadUrl("javascript:callJS()");
} else {
myWebview.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此處為 js 返回的結果
}
});
}
擴充套件
利用loadUrl（）方法可以動態新增js程式碼，比如為所有圖片新增點選事件
private static void addImageClickListener(WebView webView) {
webView.loadUrl("javascript:(function(){" +
"var objs = document.getElementsByTagName(\"img\"); " +
"for(var i=0;i<objs.length;i++)" +
"{"
+ "if(objs[i].parentNode.getAttribute('href')==null){"
+"if(objs[i].parentNode.nodeName != 'SECTION'){"
+ "objs[i].onclick=function()" +
"{"
+ "window.imagelistener.openImage(this.src);" +//通過js程式碼找到標籤為img的程式碼塊，設定點選的監聽方法與本地的openImage方法進行連線
"}"
+ "}"
+ "}"
+ "}"
+ "})()");
}
2.js呼叫android中的程式碼
- 通過WebView的addJavascriptInterface（）進行物件對映
- 通過 WebViewClient 的shouldOverrideUrlLoading ()方法回撥攔截 url
- 通過 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回撥攔截JS對話方塊alert()、confirm()、prompt（） 的訊息資訊
大神寫的很詳細，但還是想記錄下自己的程式(js檔案就記錄了)
方法一
public class AndroidToJs extends Object {
@JavascriptInterface
public void hello(String msg){
System.out.println(msg);
}
}
---------------------------------------------------------------
myWebview = findViewById(R.id.main_webview_id);
WebSettings webSettings=myWebview.getSettings();
webSettings.setJavaScriptEnabled(true);
myWebview.addJavascriptInterface(new AndroidToJs(),"android");
myWebview.loadUrl("file:///android_asset/androidToJs");
方法二
myWebview = findViewById(R.id.main_webview_id); WebSettings webSettings = myWebview.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setJavaScriptCanOpenWindowsAutomatically(true); myWebview.loadUrl("file:///android_asset/androidToJs2"); myWebview.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { Uri uri = Uri.parse(url); if (uri.getScheme().equals("js")) { if(uri.getAuthority().equals("webview")){ System.out.println("js呼叫了Android的方法"); //獲得連結中傳過來的引數 Set<String> collection=uri.getQueryParameterNames(); for (String str : collection) { System.out.println("value="+uri.getQueryParameter(str)); } } } return true; } });
方法三
webView = findViewById(R.id.main_webview_id);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
// 設定允許JS彈窗
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
webView.loadUrl("file:///android_asset/androidToJs3");
webView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
Uri uri = Uri.parse(message);
if (uri.getScheme().equals("js")) {
if (uri.getAuthority().equals("demo")) {
System.out.println("js呼叫了Android的方法");
//獲得連結中傳過來的引數
Set<String> collection = uri.getQueryParameterNames();
for (String str : collection) {
System.out.println("value=" + uri.getQueryParameter(str));
}
result.confirm("js呼叫了Android的方法成功啦");
}
return true;
}
return super.onJsPrompt(view, url, message, defaultValue, result);
}
// 攔截JS的警告框
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
return super.onJsAlert(view, url, message, result);
}
// 攔截JS的確認框
@Override
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
return super.onJsConfirm(view, url, message, result);
}
});
}
注意點:
1.方法2解析的是url，方法三解析的是message
2.方法2返回值的獲得需要利用android調js的方法實現，方法三利用result.conf2.irm("js呼叫了Android的方法成功啦");
3.載入本地檔案的時候，自己建立的什麼檔案就寫什麼檔案
比如assets目錄下的檔名為androidToJs，那載入時就為loadurl（"file:///android_asset/androidToJs")
～～喵印