現在有很多時候，我們的 App 都進行了混合開發，而最簡單，最常用的就是有些網頁採用了 WebView 進行展示，這就需要我們瞭解和懂得如何實現 WebView 和 JS 進行互動。今天我們就來學習一下，如何點選 WebView 中的網頁圖片，呼叫原生控制元件進行放大展示。
其實實現這種互動非常簡單，就是通過 JS 呼叫原生控制元件。基本思路如下：
- 首先載入一個 html 網頁，網址或者本地 html 檔案都可以。
- 遍歷 html 標籤原始碼，找到所有的 img 標籤節點。
- 給 遍歷到得 img 標籤節點加上 onClick 事件。
- 通過點選加上的 onClick 事件，通過 JS 呼叫原生控制元件，展示放大即可。
效果圖
這是線上網址展示的效果圖
這是本地 html 檔案展示出的效果圖
實現方法
html 檔案
我們先寫一個簡單的 html 檔案，裡面放兩張圖片。原始碼非常簡單。程式碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>
<body>
<h1>顯示圖片</h1>
<img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490585759664&di=56aa55f480140643a11c134ef8bdae07&imgtype=0&src=http%3A%2F%2Fi2.sanwen8.cn%2Fdoc%2F1610%2F704-161024211H3.jpg' style='vertical-align:middle;' />
<h1>第二張圖片</h1>
<img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490585932299&di=9ab54209dc8672cdd45b817ba3b09000&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fbaike%2Fpic%2Fitem%2F5fdf8db1cb134954a4d833a0534e9258d0094a34.jpg' />
</body>
<html>複製程式碼寫的這個本地的 html 檔案，放到 main/assets 目錄下即可。
設定 WebView
這一步就是將我們寫的 html 本地檔案放入到 WebView 中。方法如下：
mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();
// 設定與Js互動的許可權
webSettings.setJavaScriptEnabled(true);
// 設定允許JS彈窗
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
//防止中文亂碼
mWebView.getSettings().setDefaultTextEncodingName("UTF-8");
// 先載入JS程式碼
// 格式規定為:file:///android_asset/檔名.html
// mWebView.loadUrl("file:///android_asset/image.html");
mWebView.loadUrl("http://www.toutiao.com/a6401738581286682881/#p=1");
//載入js
mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");複製程式碼關鍵的程式碼是：
mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");複製程式碼這行程式碼就是 WebView 與 JavaScript 互動的關鍵。上面兩個引數，一個是 JS 介面，一個是監聽函式的名字。
遍歷 img 節點，加入監聽
mWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
//這段js函式的功能就是註冊監聽，遍歷所有的img標籤，並新增onClick函式，函式的功能是在圖片點選的時候呼叫本地java介面並傳遞url過去
mWebView.loadUrl("javascript:(function(){"
+ "var objs = document.getElementsByTagName(\"img\"); "
+ "for(var i=0;i<objs.length;i++) " + "{"
+ " objs[i].onclick=function() " + " { "
+ " window.imagelistner.openImage(this.src); "
+ " } " + "}" + "})()");
}
});
}複製程式碼這裡有行程式碼注意一下：
window.imagelistner.openImage(this.src);複製程式碼這裡就是給每個 img 節點加入點選事件，注意看這個imagelistenr其實就是 mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner") 定義的方法名，而 openImage 就是我們自定義的 JavaScriptInterface 中的 openImage 方法。
通過 JS 介面，呼叫原生控制元件
// js通訊介面
public class JavascriptInterface {
private Context context;
public JavascriptInterface(Context context) {
this.context = context;
}
@android.webkit.JavascriptInterface
public void openImage(String img) {
Intent intent = new Intent();
intent.putExtra("img", img);
intent.setClass(context, ImageActivity.class);
context.startActivity(intent);
System.out.println(img);
}
}複製程式碼這裡的 JavascriptInterface 就是和 mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner") 中的 new JavascriptInterface(this) 對應的。這樣我們就通過 JavascriptInterface 就把 JS 和 WebView 之間實現通訊了。
歡迎大家關注我的技術分享公眾號：非著名程式設計師（smart_android）。技術文章均先首發於我的技術分享的微信公眾號。