随着 H5 的普及,很多在 Android 项目中,有时候整个页面是个 webview,用来加载我们制作好的网页。那么时常会有网页和 app 进行交互的需求。
而且这次在开发 android 项目也是用得这种方式,中间也遇到了不少的坑,虽然现在已经实现想要的目的,但还是要这个实现的方法记录下来。
前期准备
webview需要作如下配置,下面几行都是必要的。
//获取一个 webViewSetting 对象
WebSettings setting = webView.getSettings();
//支持JavaScript
setting.setJavaScriptEnabled(true);
//显示缩放控制工具
setting.setDisplayZoomControls(true);
//设置webView支持缩放
setting.setSupportZoom(true);
setting.setBuiltInZoomControls(true);
//设置加载进来的页面自适应手机屏幕
setting.setUseWideViewPort(true);
setting.setLoadWithOverviewMode(true);
setting.setDomStorageEnabled(true);
// 给web提供调用接口
webView.addJavascriptInterface(
new MyWebAppInterface(ctx), "Android");
webView.setWebViewClient(new MyWebViewClient());
// 本地H5 跨载访问线上
// API >= 16
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
}
JS 如何调用 Android 的方法
需求一: 如果需要我们点击网页上的按钮后,关闭当前页面回到app,怎么实现呢?
首先在 WebAppInterface 类中代码示例:
public class MyWebAppInterface {
@JavascriptInterface
public void backToApp() {
finish();
}
}
其中 @JavascriptInterface 标签表示这个方法是供 JS 调用的。
然后在 H5 中通过以下代码进行调用
<input type="button" value="close" onClick="window.Android.backToApp()" />
需求二:如果要实现JS与Android相互传值
public class MyWebAppInterface {
@JavascriptInterface
public String getString() {
return mStr;
}
@JavascriptInterface
public void setString(String str) {
mStr = str;
}
}
在 H5 中通过以下代码进行调用
window.Android.getString()
window.Android.setString('xxx')
二. Android 如何调用 JS 的函数
在 MyWebViewClient 类中的写法:
public class MyWebViewClient extends WebViewClient {
private static String TAG = "MyWebViewClient";
Context ctx;
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
// 页面加载完毕后的代码
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
view.evaluateJavascript("javascript:functionName('value')", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
// 如果 functionName 中有 return 的话就会在这里体现
MyLog.d(TAG + " evaluateJavascript", value);
}
});
} else {
view.loadUrl("javascript:functionName('value')");
}
}
}
view.evaluateJavascript 与 view.loadUrl 区别
webview.loadUrl:无返回值,大部分 Android SDK 版本通用
view.evaluateJavascript:有返回值,Android 版本 4.4 以上,包括4.4
转载请注明:隨習筆記 » WebView 的 JS 与 Android 原生互相调取并传值