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

Java 與 Js 彼此調用的前提是設置 WebView 支持 JavaScript 功能：javascript

mWebView.getSettings().setJavaScriptEnabled(true);

Java 調用 Js

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

<script type="text/javascript">
    function javaCallJs(message){
        alert(message);
    }
</script>

第二步，在 Java 代碼中按照 "javascript:XXX" 的 Url 格式使用 WebView 加載訪問便可：html

mWebView.loadUrl("javascript:javaCallJs(" + "'Message From Java'" + ")");

注意：String 類型的參數須要使用單引號「'」包裹，數組類型的參數則不用，如：javascript:javaCallJs([01, 02, 03])，其餘複雜類型的參數能夠轉換爲 Json 字符串的形式傳遞。java

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 中：android

mWebView.addJavascriptInterface(MainActivity.this, "main");

addJavascriptInterface(Object object, String name) 參數說明：object 表示 Js 訪問的接口內容所在的 Java 對象；name 表示 Js 調用 Java 代碼時的接口名稱，與 Js 中的調用保持一致便可。web

第三步，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:ide

<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:post

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);
    }

}

效果圖：測試

https://lc-gold-cdn.xitu.io/0cb1ac02567d72f4d69c.gif?imageView2/0/w/1280/h/960/format/webp/ignore-error/1

注意：不管是 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);
    }
});

Android WebView —— Java 與 JavaScript 交互總結

Java 調用 Js

Js 調用 Java

注意事項

Url 攔截