天天看點

WebView和js的互調1.js 調用Java2.Java調用js

(建立于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());