在開發中實現點選 WebView 中的圖片,呼叫原生控制元件放大展示
現在有很多時候,我們的 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");//載入jsmWebView.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 之間實現通訊了。