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

1. Android WebView与JS交互入门
2. android与h5交互
3. android与unity交互
4. Unity与Android交互
5. unity3d与android交互
6. unity与android交互
7. Unity_与android交互
8. js与android交互
9. AR：Unity与iOS交互（入门篇）
10. Nodejs与Redis的交互（mranney/node_redis）入门
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用