上一篇博文中，我們大概瞭解了js與webview的一些交互，然而，在我們實際的應用中，更傾向於在android端對網頁做一些處理，今天帶給大家的是往頁面注入JS腳本，提取頁面上的圖片，然後通過另一個Activity顯示圖片。
首先來看看效果，提提神。
首先我們來分析分析這麼做的一些處步驟：
1、查找網頁所有的圖片控件
2、給所有的圖片控件添加一個onClick點擊事件
3、點擊圖片的onClick事件是js調用android內部的方法，並將src帶給android
4、android實現跳轉頁面，加載src的圖片。
我們在網頁中設置一個圖片，一般都是用如圖的方式在頁面上顯示一個圖片，我們的最終目的是拿到img.jpg這個圖片鏈接，
我們知道，一個頁面中會有很多很多的img標籤和src屬性，我們要全部拿到，必須使用js的getElementsByTagName方法。
<html>
<body>
<img src="img/lang.jpg" />
<img src="img/chat-1.png" />
</body>
<script>
function getImage(){
var img = document.getElementsByTagName("img");
for(var i = 0; i < img.length; i++) {
var a = document.getElementsByTagName("img")[i];
a.onclick = function() {
alert(a.src);
};
}
}
getImage();
</script>
</html>效果
我們通過getElementsByTagName去遍歷頁面的所有img標籤，返回的是一個數組類型，然後通過數組遍歷每一個節點，然後給每個節點添加一個onClick參數，並且設置點擊傳遞的參數爲src圖片鏈接，我們測試了一下，先用alert去顯示圖片的鏈接，發現正如自己所想，拿到了期待的值。
現在，我們要把這段js代碼放到android中去，我們既然要遍歷整個網頁，必須得在網頁全部加載完成的時候才能遍歷到數據，我們在上一篇說到webview的加載完成回調onPageFinished方法，現在我們把js代碼放到這個方法裏面去加載。
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
//添加js代碼
view.loadUrl("javascript:function img(){" +
"var href=document.getElementsByTagName(\"img\");" +
"\t\t for(var i=0;i<href.length;i++){\n" +
"\t\t \t var a=document.getElementsByTagName(\"img\")[i];\n" +
"\t\t \t a.οnclick=function(){\n" +
"\t\t \t window.jsAndroid.onShowImage(this.src)" +
"\t\t \t };\n" +
"\t\t }" +
"}");
//執行js函數
view.loadUrl("javascript:img()");原來網頁測試的alert替換成了調用原生代碼的操作，並將src傳遞給android onShowImage函數，我們再來看看onShowImage，
class JSObject {
@JavascriptInterface
public void onShowImage(String src) {
Intent intent = new Intent(MainActivity.this, ImageActivity.class);
intent.putExtra("src", src);
startActivity(intent);
}
}該類特別簡單，就是拿這個鏈接跳轉另一個Activity去顯示，我此處用的是Glide去加載的url。
整體代碼
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initWeb();
initSetting();
webView.addJavascriptInterface(new JSObject(), "jsAndroid");
}
private void initWeb() {
webView = (WebView) findViewById(R.id.webview);
webView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
view.loadUrl("javascript:function img(){" +
"var href=document.getElementsByTagName(\"img\");" +
"\t\t for(var i=0;i<href.length;i++){\n" +
"\t\t \t var a=document.getElementsByTagName(\"img\")[i];\n" +
"\t\t \t a.οnclick=function(){\n" +
"\t\t \t window.jsAndroid.onShowImage(this.src)" +
"\t\t \t };\n" +
"\t\t }" +
"}");
view.loadUrl("javascript:img()");
}
});
}
private void initSetting() {
seting = webView.getSettings();
seting.setJavaScriptEnabled(true);
// 設置允許JS彈窗
seting.setJavaScriptCanOpenWindowsAutomatically(true);
//防止中文亂碼
seting.setDefaultTextEncodingName("UTF-8");
//設置webview的緩存
seting.setCacheMode(WebSettings.LOAD_NO_CACHE);
}
class JSObject {
@JavascriptInterface
public void onShowImage(String src) {
Intent intent = new Intent(MainActivity.this, ImageActivity.class);
intent.putExtra("src", src);
startActivity(intent);
}
}
ok，這樣就實現了所需要的效果了，主要還是js代碼的設計，下一篇，還有驚喜喲！