Android中WebView與Js的互動

【知識概要】

1. Android中通過WebView調用JS方法(傳遞參數)

2、Js調用Android的方法

3、WebView适配

【實作效果】

一、【 Android中通過WebView調用JS方法(傳遞參數)】

Android代碼

 Android調用js中showDemo(str)方法存在兩種方式:（新版本浏覽器和舊版本浏覽器）、利用webview直接去執行js代碼。

Android代碼

Js代碼

點選Adnroid中按鈕，調取js代碼，将結果更新至WebView。

二、【js中調取Android代碼_廣播[email protected]】

Android代碼

 js調用showString()方法，将資料放入intent中去，然後發送廣播。在構造JavasrciptMethod執行個體的時候将activity傳遞進去。app中接受到廣播ACTION_WEB事件後就會調用對應的方法，把從js中傳遞過來的資料顯示至view控件中。

Android代碼

 然後需要對廣播進行注冊，并指定接口的名稱為Vine。

 Android代碼

 在js中調用方式:（指定接口中的具體方法）

Js代碼

四、【WebView适配】

如果接入的h5沒适配好給app端，需自己去做适配。避免出現web展示的h5特别大等問題。

webView = findViewById(R.id.webView);

        WebSettings settings = webView.getSettings();
        // 設定WebView支援JavaScript
        settings.setJavaScriptEnabled(true);
        //支援自動适配
        settings.setUseWideViewPort(true);
        settings.setLoadWithOverviewMode(true);
        settings.setSupportZoom(true);  //支援放大縮小
        settings.setBuiltInZoomControls(true); //顯示縮放按鈕
        settings.setBlockNetworkImage(true);// 把圖檔加載放在最後來加載渲染
        settings.setAllowFileAccess(true); // 允許通路檔案
        settings.setSaveFormData(true);
        settings.setGeolocationEnabled(true);
        settings.setDomStorageEnabled(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);/// 支援通過JS打開新視窗
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        //設定不讓其跳轉浏覽器
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                return false;
            }
        });

        // 添加用戶端支援
        webView.setWebChromeClient(new WebChromeClient());
//        mWebView.loadUrl(TEXTURL);

       //不加這個圖檔顯示不出來
        if (Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP) {
            webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }
        webView.getSettings().setBlockNetworkImage(false);

//允許cookie 不然有的網站無法登陸
CookieManager mCookieManager = CookieManager.getInstance();
        mCookieManager.setAcceptCookie(true);
        mCookieManager.setAcceptThirdPartyCookies(webView, true);

        webView.loadUrl(URL);
           

五、【總結】

1、Andorid調用Js:調用webview中的方法。

2、Js調用Android方法代碼。

[1] 在Android利用@javascriptInterface提供接口、@javascriptInterface告知webview,此方法是一個可以被js調用的方法：廣播傳遞參數或方法或要執行的東西->廣播接收器接收到資訊->執行

[2] 将接口添加至webview， webview.addJavaScriptInterface()；也可以調用多個方法。

[3] js代碼中調用即可。