項目要用到Webview和js交互，查了查以前的項目感覺還是有必要整理下的。

簡單描述下項目中用到的地方，比如說在web頁需要用到登錄的地方點擊登錄跳轉到APP原生登錄界面去登錄，點擊web頁的撥打電話彈出原生dialog詢問是否撥打，點擊web頁里面的圖片進行放大處理。針對于上述的需求我們通用的方式大概有兩種，一是監聽a標簽，在shouldOverrideUrlLoading根據URL進行判斷，二是js代碼注入，找到我們想要處理的元素進行js代碼注入。下面就這兩種方式簡單的進行描述

首先需要初始化WebView以及設置支持JavaScript，常用的配置屬性有一下幾種，可以在項目中根據需求添加

WebSettings webSetting = webView.getSettings();

// 支持JavaScript

webSetting.setJavaScriptEnabled(true);

// 設置可以訪問文件s

webSetting.setAllowFileAccess(true);

// 告訴javascript來自動打開的窗口。這適用于JavaScript函數的窗口，open()。

webSetting.setJavaScriptCanOpenWindowsAutomatically(true);

// 支持縮放

webSetting.setSupportZoom(true);

// 是否禁止是網絡加載數據

webSetting.setBlockNetworkLoads(false);

// 設置是否支持多窗口

webSetting.setSupportMultipleWindows(true);

// 是否開啟本地DOM存儲

webSetting.setDomStorageEnabled(true);

// 設置不緩存

webSetting.setCacheMode(WebSettings.LOAD_NO_CACHE);

// 阻塞加載圖片

webSetting.setBlockNetworkImage(false);

// 支持啟用插件

webSetting.setPluginState(WebSettings.PluginState.ON);

// 設置任意比較縮放為真

webSetting.setUseWideViewPort(true);

// 設置WebView加載頁面的模式

webSetting.setLoadWithOverviewMode(true);

// 控制頁面顯示布局

// NARROW_COLUMNS：可能的話使所有列的寬度不超過屏幕寬度

// NORMAL：正常顯示不做任何渲染

// SINGLE_COLUMN：把所有內容放大webview等寬的一列中

webSetting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);

//禁止用地理定位

webSetting.setSaveFormData(true);

// 是否啟動地理定位

webSetting.setGeolocationEnabled(true);

// 設置定位的數據庫路徑

webSetting.setGeolocationDatabasePath("/data/data/org.itri.html5webview/databases/");

接下來就是WebView交互中非常重要的兩個類WebViewClient和WebChromeClient。WebViewClient就是幫助WebView處理各種通知、請求事件的，具體來說包括以下常用方法：

onLoadResource() // 在加載頁面資源時會調用，每一個資源(比如圖片)的加載都會調用一次。

shouldOverrideUrlLoading //在點擊請求的是鏈接是才會調用，重寫此方法返回true表明點擊網頁里面的鏈接還是在當前的webview里跳轉，不跳到瀏覽器那邊。這個函數我們可以做很多操作，比如我們讀取到某些特殊的URL，于是就可以不打開地址，取消這個操作，進行預先定義的其他操作，這對一個程序是非常必要的。

onPageStart //這個事件就是開始載入頁面調用的，通常我們可以在這設定一個loading的頁面，告訴用戶程序在等待網絡響應。

onPageFinish //在頁面加載結束時調用。同樣道理，我們知道一個頁面載入完成，于是我們可以關閉loading 條，切換程序動作。

onReceiveError // (報告錯誤信息)

onReceivedHttpAuthRequest ()//(獲取返回信息授權請求)

WebChromeClient是輔助WebView處理Javascript的對話框，網站圖標，網站title，加載進度等 ，常用方法有以下幾個:

onCloseWindow() //關閉WebView

onCreateWindow()

onJsAlert //WebView上alert是彈不出來東西的，需要定制你的WebChromeClient處理彈出)

onJsPrompt

onJsConfirm

onProgressChanged //可以根據加載進度設置進度條

onReceivedIcon //可以獲取URL icon

onReceivedTitle //可以獲取URL title

一、監聽a標簽

這種實現方式比較簡單，我們可以在shouldOverrideUrlLoading中根據URL進行判斷，比如說界面中有一個撥打電話的功能，其js代碼如下

這里我們可以通過如下方式進行彈出原生dialog

public boolean shouldOverrideUrlLoading(WebView view, String url) {

if (TextUtils.isEmpty(url))

return true;

if (url.startsWith("tel:")) {

PhoneDialog callDialog = new PhoneDialog(WebViewActivity.this, url);

callDialog.disDialog();

callDialog.callPhone();

callDialog.show();

return true;

}

return true;

}

二、通過js代碼

查了下常用的注入方式有兩種，第一種是當webview加載完之后，讀取整個js文件中的內容，然后將整個文件內容以字符串的形式，通過webview.loadUrl(“javascript:fileContentString”)注入，不過我好像沒怎么用到過這個方式，一般都是用第二種，即通過給特定標簽設置事件來滿足業務需求。

比如說我們給所有的圖片設置一個點擊事件來獲取圖片，進行一些列放大存儲等操作，我們可以通過如下代碼來實現。

// 注入js函數監聽

private void addImageClickListner() {

// 這段js函數的功能就是，遍歷所有的img幾點，并添加onclick函數，函數的功能是在圖片點擊的時候調用本地java接口并傳遞url過去

webView.loadUrl("javascript:(function(){" +

"var objs = document.getElementsByTagName(\"img\"); " +

"for(var i=0;i

"{"

+ " objs[i].οnclick=function() " +

" { "

+ " window.imagelistner.openImage(this.src); " +

" } " +

"}" +

"})()");

}

// js通信接口

public class JavascriptInterface {

private Context context;

public JavascriptInterface(Context context) {

this.context = context;

}

@android.webkit.JavascriptInterface

public void openImage(String img) {

Toast.makeText(context,img,Toast.LENGTH_SHORT).show();

}

}

//上述兩個方法實現了給圖片添加點擊事件，我們還需要對webview進行設置以及注入

@SuppressLint({"JavascriptInterface", "NewApi"})

@Override

public void onPageFinished(WebView view, String url) {

view.getSettings().setJavaScriptEnabled(true);

super.onPageFinished(view, url);

addImageClickListner();// 頁面加載完成之后，添加監聽圖片的點擊js函數

}

//對WebView進行設置

webView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");

上述實現方式有以下幾點需要注意：1、注意這里的方法名imagelistener要和輸入的js代碼里面的方法一致，2、自定義的方法openImage一定要注明@Android.webkit.JavascriptInterface，否則不起作用。

可以看到我們注入的js代碼是通過getElementsByTagName獲取所有的img元素然后設置點擊事件，如果我們相對某一特定的元素進行設置也可以通過getElementById獲取單獨的元素，或者還可以通過getElementsByTagName根據TAG獲取元素。

這是我現階段知道的方式，如果還有其它比較好的實現方式可以一起討論下。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。