Android WebView —— Java 與 JavaScript 互動總結

亦楓發表於2016-12-01
AndroidWebViewJavaScript

相比於 Native App 和 Web App，Hybrid App 憑藉其迭代靈活、控制自如、多端同步的優勢在應用市場上越發顯得優勝，主要得力於，其將變更頻繁的部分產品功能使用 H5 開發並在客戶端中藉助 WebView 控制元件嵌入應用當中。所以，開發中我們總會遇到原生 Java 程式碼與網頁中的 Js 程式碼之間相互呼叫從而產生的互動問題。

Java 與 Js 彼此呼叫的前提是設定 WebView 支援 JavaScript 功能：

mWebView.getSettings().setJavaScriptEnabled(true);複製程式碼

Java 呼叫 Js

第一步，在網頁中使用 Js 定義提供給 Java 訪問的方法，就像普通方法定義一樣，如：

<script type="text/javascript">
    function javaCallJs(message){
        alert(message);
    }
</script>複製程式碼

第二步，在 Java 程式碼中按照 "javascript:XXX" 的 Url 格式使用 WebView 載入訪問即可：

mWebView.loadUrl("javascript:javaCallJs(" + "'Message From Java'" + ")");複製程式碼

注意：String 型別的引數需要使用單引號 “'” 包裹，陣列型別的引數則不用，如：javascript:javaCallJs([01, 02, 03])，其他複雜型別的引數可以轉換為 Json 字串的形式傳遞。

Js 呼叫 Java

第一步，在 Java 物件中定義 Js 訪問的方法，如：

@JavascriptInterface
public void jsCallJava(String message){
    Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
}複製程式碼

注意事項：提供給 Js 訪問的屬性和方法必須定義為 public 型別，並且新增註解 @JavascriptInterface。在 API 17 及更高版本的系統中，任何暴露給 Js 訪問的 Java 介面都需要新增這個註解，否則會報異常：Uncaught TypeError: Object [object Object] has no method 'XXX'。系統這種做法也是為了降低應用的安全隱患，因為在之前的版本中，Js 可以通過反射的方式訪問注入 WebView 中的 Java 物件的 public 型別 field 和 method，從而隨意修改宿主程式。

第二步，將提供給 Js 訪問的介面內容所屬的 Java 物件注入 WebView 中：

mWebView.addJavascriptInterface(MainActivity.this, "main");複製程式碼

addJavascriptInterface(Object object, String name) 引數說明：object 表示 Js 訪問的介面內容所在的 Java 物件；name 表示 Js 呼叫 Java 程式碼時的介面名稱，與 Js 中的呼叫保持一致即可。

第三步，Js 按照指定的介面名訪問 Java 程式碼，有如下兩種寫法：

<button type="button" onClick="javascript:main.jsCallJava('Message From Js')" >Js Call Java</button>

<!--<button type="button" onClick="window.main.jsCallJava('Message From Js')" >Js Call Java</button>-->複製程式碼

這裡簡單提供一個可供測試的 Html 網頁和 Activity 程式碼：

test.html:

<html>  
    <head>  
        <meta http-equiv="Content-Type"  content="text/html;charset=UTF-8">
        <script type="text/javascript">
            function javaCallJs(message){
                alert(message);
            }
        </script>
    </head>  
    <body>
        <button type="button" onClick="window.main.jsCallJava('Message From Js')" >Js Call Java</button>
    </body>  
</html>複製程式碼

MainActivity.java:

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar mToolbarTb = (Toolbar) findViewById(R.id.tb_toolbar);
        setSupportActionBar(mToolbarTb);

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl("file:///android_asset/test.html");
        mWebView.addJavascriptInterface(MainActivity.this, "main");

        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                return super.onJsAlert(view, url, message, result);
            }
        });
    }

    public void javaCallJs(View v){
        mWebView.loadUrl("javascript:javaCallJs(" + "'Message From Java'" + ")");
    }

    @JavascriptInterface
    public void jsCallJava(String message){
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.search, menu);
        return super.onCreateOptionsMenu(menu);
    }

}複製程式碼

效果圖：

Android WebView —— Java 與 JavaScript 互動總結

注意：無論是 Java 呼叫 Js 還是 Js 呼叫 Java，只能通過引數傳遞資料，而無法獲取彼此方法的返回值！解決方案就是額外新增一層回撥來達到這個目的。比如 Java 呼叫 Js 的方法，Js 計算結束所得結果不能通過 return 語句返回給 Java 呼叫者，而是再回撥 Java 的另一個方法，通過傳參的形式傳遞給 Java。

注意事項

1.使用 loadUrl() 方法實現 Java 呼叫 Js 功能時，必須放置在主執行緒中，否則會發生崩潰異常。比如修改上面的程式碼：

new Thread(new Runnable() {
    @Override
    public void run() {
        mWebView.loadUrl("javascript:javaCallJs(" + "'Message From Java'" + ")");
    }
}).start();複製程式碼

執行時會得到如下 logcat 異常資訊：

java.lang.RuntimeException: java.lang.Throwable: A WebView method was called on thread 'Thread-18022'. All WebView methods must be called on the same thread.複製程式碼

如果真的在子執行緒中遇到呼叫 Js 的功能，也要將其轉換到主執行緒中去：

mWebView.post(new Runnable() {
    @Override
    public void run() {
        mWebView.loadUrl("javascript:javaCallJs(" + "'Message From Java'" + ")");
    }
});複製程式碼

2.Js 呼叫 Java 方法時，不是在主執行緒 (Thread Name：main) 中執行的，而是在一個名為 JavaBridge 的執行緒中執行的，通過如下程式碼可以測試：

    @JavascriptInterface
    public void jsCallJava(String message){
        Log.i("thread", Thread.currentThread().getName());
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
    }複製程式碼

所以這裡需要注意的是，當 Js 呼叫 Java 時，如果需要 Java 繼續回撥 Js，千萬別在 JavascriptInterface 方法體中直接執行 loadUrl() 方法，而是像前面一樣進行執行緒切換操作。

3.程式碼混淆時，記得保持 JavascriptInterface 內容，在 proguard 檔案中新增如下類似規則 (有關類名按需修改)：

keepattributes *Annotation*
keepattributes JavascriptInterface
-keep public class com.mypackage.MyClass$MyJavaScriptInterface
-keep public class * implements com.mypackage.MyClass$MyJavaScriptInterface
-keepclassmembers class com.mypackage.MyClass$MyJavaScriptInterface { 
    <methods>; 
}複製程式碼

Url 攔截

除了上面這種 Java 與 Js 互調方法的方式，還可以利用 WebView 攔截 Url 的方式實現原生應用與 H5 之間的互動動作。通過 WebViewClient 提供的介面攔截網頁內諸如二級跳轉的 Url 連結，便可以進行業務邏輯上的判斷處理、Url 引數傳遞等功能，如：

mWebView.setWebViewClient(new WebViewClient(){
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        // request.getUrl()
        return super.shouldOverrideUrlLoading(view, request);
    }
});複製程式碼

注意：過去常用的 shouldOverrideUrlLoading(WebView view, String url) 方法已經被廢棄。

參考使用

通過 Java 與 Js 之間的互動可以做很多事情，比如獲取網頁中的圖片，利用原生控制元件予以展示，類似響應微信公眾號文章中的圖片點選事件。參考程式碼如下：

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl("https://www.taobao.com/");
        mWebView.addJavascriptInterface(new MyJavascriptInterface(), "imageClick");

        mWebView.setWebViewClient(new MyWebViewClient());
    }

    /**
     * 遍歷 <img> 標籤, 新增圖片點選事件, 將圖片 Url 地址回撥給 Java 方法
     */
    private void addImageClickListner() {
        mWebView.loadUrl("javascript:(function(){" +
                "var objs = document.getElementsByTagName(\"img\"); " +
                "for(var i=0;i<objs.length;i++)  " +
                "{"
                + "    objs[i].onclick=function()  " +
                "    {  "
                + "        window.imageClick.openImage(this.src);  " +
                "    }  " +
                "}" +
                "})()");
    }

    public class MyJavascriptInterface {

        public MyJavascriptInterface() {

        }

        @android.webkit.JavascriptInterface
        public void openImage(String imageUrl) {
            Log.i("imageUrl", imageUrl);
            // TODO 獲取圖片地址後, 通過原生控制元件 ImageView 展示, 新增縮放、儲存等功能
        }
    }

    private class MyWebViewClient extends WebViewClient {

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            return super.shouldOverrideUrlLoading(view, request);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            addImageClickListner();
        }

    }

}複製程式碼

最後

本文由 亦楓 創作並首發於 亦楓的個人部落格 ，同步授權微信公眾號：技術鳥（NiaoTech）。

歡迎各種形式地交流與轉載，註明作者及出處即可。

本文標題為: Android WebView —— Java 與 JavaScript 互動總結

本文連結為：yifeng.studio/2016/12/01/…

Android WebView —— Java 與 JavaScript 互動總結

相關文章