Android與HTML-JS交互入門

時間 2021-01-22

標籤 javascript html java android web 緩存 app ide 函數欄目 Android 简体版

原文原文鏈接

如今的APP裏面會嵌套一些h5酷炫的界面，而咱們的app就須要和H5進行交互，下面咱們就來看看怎麼進行具體的交互。javascript

Webview的基本設置

如下是webview的基本設置html

WebSettings setting = mWebView.getSettings();
setting.setJavaScriptCanOpenWindowsAutomatically(true);//設置js能夠直接打開窗口，如window.open()，默認爲false
        setting.setJavaScriptEnabled(true);//是否容許執行js，默認爲false。設置true時，會提醒可能形成XSS漏洞
        setting.setSupportZoom(true);//是否能夠縮放，默認true
        setting.setBuiltInZoomControls(false);//是否顯示縮放按鈕，默認false
        setting.setUseWideViewPort(true);//設置此屬性，可任意比例縮放。大視圖模式
        setting.setLoadWithOverviewMode(true);//和setUseWideViewPort(true)一塊兒解決網頁自適應問題
        setting.setAppCacheEnabled(true);//是否使用緩存
        setting.setDomStorageEnabled(true);//DOM Storage
        setting.setDatabaseEnabled(true);
        setting.setAllowFileAccess(true);
        setting.setAppCacheEnabled(true);
        setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); //圖片太大
        setting.setDatabasePath(getActivity().getApplicationContext().getCacheDir().getAbsolutePath());
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            setting.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }

開啓log日誌

開啓打印web的日誌設置，能夠看到log信息：java

webview.setWebChromeClient(new WebChromeClient() {
            public boolean onConsoleMessage(ConsoleMessage cm) {
                LogUtils.e(TAG, "打印web日誌------"+cm.message() + " -- From line "
                        + cm.lineNumber() + " of "
                        + cm.sourceId());
                return true;
            }
        });

添加JavascriptInterface；android

mWebView.addJavascriptInterface(new AndroidJavaScript(), "test");

AndroidJavaScript

public class AndroidJavaScript {
        @JavascriptInterface
        public void testPage() {
            LogUtils.e("test", "testPage");
        }
    }

testPage是和H5約定的名稱，以上就是簡易的Android和js的交互，具體的細節還須要和H5討論。web

HTML簡易代碼

裏面主要有兩個按鈕，兩個JS方法緩存

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<script type="text/javascript">

function AndroidCallJs(){
     document.getElementById("content").innerHTML =
         "<br\>Android調用了JS的無參函數";
}

function AndroidCallJsParam(arg){
     document.getElementById("content").innerHTML =
         ("<br\>"+arg);
}
</script>
</head>
<body>
HTML Test <br/>
<h1><div id="content">Test </div></h1>
<br/>
<input type="button"  value="點擊調用Android代碼" onclick="window.android.startFunction()" />
<br/>
<input type="button"  value="點擊調用Android代碼並傳遞參數" onclick="window.android.startFunction('https://blog.csdn.net/sinat_26397681?spm=1000.2115.3001.5343')"  />
</body>
</html>

Android 的調用方式app

// 無參數調用 JS的方法  
webview.loadUrl("javascript:AndroidCallJs()");
//有參調用HTML js方法
webview.loadUrl("javascript:AndroidCallJsParam(" + "'https://blog.csdn.net/sinat_26397681?spm=1000.2115.3001.5343'" + ")");

歡迎關注公衆號拖鞋王子豬一塊兒開心起來。ide