WebView和js的互調

黑夜路口發表於2018-04-16
WebViewJS

（建立於2017/5/20）

一個網頁中有如下程式碼

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script language="javascript">
    /* This function is invoked by the activity */
    function wave() {
        alert("Android呼叫Js啦");
    }
</script>
<body>
    <!-- Js呼叫Android程式碼 -->
    <a onClick="window.demo.onCallback()">點我!</a>
</body>

</html>

安卓程式碼如下

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

        webView = (WebView) findViewById(R.id.webView);

        //在webView裡面開啟網頁
        webView.setWebViewClient(new WebViewClient());

        //允許在webview裡面彈出js的窗體
        webView.setWebChromeClient(new WebChromeClient());

        //允許js的執行
        webView.getSettings().setJavaScriptEnabled(true);

        //載入assets目錄下的網頁
        webView.loadUrl("file:///android_asset/demo.html");


        //把java裡面的物件傳遞給js
        webView.addJavascriptInterface(new JsCallJava() {
            @JavascriptInterface
            @Override
            public void onCallback() {
                Toast.makeText(getApplicationContext(),"JavaScript呼叫的java程式碼",Toast.LENGTH_SHORT).show();
            }
        }, "demo");
    }

1.js 呼叫Java

我們知道，呼叫Java中一個方法，只需要獲取到這個Java物件，然後物件.方法名的方式呼叫，在網頁檔案中，有這樣一行

<a onClick="window.demo.onCallback()">點我!</a>

開啟網頁後點選點我兩個字執行的就是一個onclick方法，window.demo表示的就是Java中的物件，onCallback（）就是Java中被呼叫的方法，也就是點選“點我”後執行Java中的一個onCallback（）方法，那麼安卓中如何操作？
關鍵程式碼如下：

//把java裡面的物件傳遞給js
        webView.addJavascriptInterface(new JsCallJava() {
            @JavascriptInterface
            @Override
            public void onCallback() {
                Toast.makeText(getApplicationContext(),"JavaScript呼叫的java程式碼",Toast.LENGTH_SHORT).show();
            }
        }, "demo"); 
         
    
        public interface JsCallJava{
              public void onCallback();
        }

設定一個介面，介面中的回撥方法為js重呼叫的方法，很關鍵的一行@JavascriptInterface必須加上，指明這是一個js介面，否則無法執行

2.Java呼叫js

假如我們現在想呼叫網頁中的wave方法

function wave() {
    alert("Android呼叫Js啦");
}

只需要這樣執行

webView.loadUrl("javascript:wave()");

關鍵一點必須設定,不然無法彈出alert

//允許在webview裡面彈出js的窗體
webView.setWebChromeClient(new WebChromeClient());


相關文章