Android与HTML-JS交互入门
Posted 拖鞋王子猪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android与HTML-JS交互入门相关的知识，希望对你有一定的参考价值。
现在的APP里面会嵌套一些h5酷炫的界面，而我们的app就需要和H5进行交互，下面我们就来看看怎么进行具体的交互。
Webview的基本设置
以下是webview的基本设置
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信息：
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；
mWebView.addJavascriptInterface(new androidJavaScript(), "test");
AndroidJavaScript
public class AndroidJavaScript
@JavascriptInterface
public void testPage()
LogUtils.e("test", "testPage");
testPage是和H5约定的名称，以上就是简易的Android和js的交互，具体的细节还需要和H5讨论。
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 的调用方式
// 无参数调用 JS的方法
webview.loadUrl("javascript:AndroidCallJs()");
//有参调用HTML js方法
webview.loadUrl("javascript:AndroidCallJsParam(" + "'https://blog.csdn.net/sinat_26397681?spm=1000.2115.3001.5343'" + ")");
以上是关于Android与HTML-JS交互入门的主要内容，如果未能解决你的问题，请参考以下文章