此项目，主要演示Android的WebView视图中，Native Call JavaScript、以及JavaScript Call Native的几种方式。
写在前面: Hybrid不可避免使用Native和JS交互，本文主要总结一下Android和JavaScript交互的解决方方。
[TOC]
mWebView.loadUrl("javascript:alert('hello world')");String jsString = "sum(a, b)";
mWebView.evaluateJavascript(js, new ValueCallback<String>() {
@Override
public void onReceiveValue(String s) {
// 这里可以处理被调用js方法的return
}
});方案三:引用JsBridge框架
- Web首先初始化WebViewJavascriptBridge，注册事件监听。
- Web然后初始化接收函数回调，分为默认接收和指定接收，responseCallback回调给Native信息
- Native 调用
Webview.send()或WebView.callHandler()
//注册事件监听，初始化
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady',
function() {
callback(WebViewJavascriptBridge)
},
false
);
}
}
//回调函数，接收java发送来的数据
setupWebViewJavascriptBridge(function(bridge) {
//默认接收
bridge.init(function(message, responseCallback) {
// 处理接收到消息
});
//指定接收，
bridge.registerHandler("JSFUCN", function(data, responseCallback) {
// 处理接收到消息
});
}) // 默认接收
private void callJavaScriptDefaut() {
mWebView.send("发送数据给js默认接收, new CallBackFunction() {
@Override
public void onCallBack(String data) { //处理js回传的数据
});
}
// 指定接收
private void callJavaScriptSpec() {
mWebView.callHandler("JSFUCN", "发送数据给js指定接收", new CallBackFunction() {
@Override
public void onCallBack(String data) { //处理js回传的数据
}
});
}利用 webview调用js需要注意一下几点
- WebSettings设置支持javascript
// 设置在类之前
@SuppressLint("SetJavaScriptEnabled")
mWebView.getSettings().setJavaScriptEnabled(true);- 在运行Js脚本前，要有document对象，至少得load一个空白页
webView.loadData("","text/html","UTF-8");- 如果还是不行的话，就应该是因为第一个还没执行完呢 - 从界面按钮调用 - 延时调用 - 在onPageFinished中调用
webView.loadData(“”,"text/html","UTF-8");
webView.loadUrl("javascript:alert('hello')");- 必须实现WebChromeClient、WebViewClient
webView.setWebViewClient(new WebViewClient());
webView.setWebChromeClient(new WebChromeClient());- 使用JSBridge不用实现WebViewClient
- WebViewClient重载
shouldOverrideUrlLoading拦截URL
Web代码
function openMyBlogNewTarget() {
window.open('https://www.jianshu.com/u/263c210b047c')
}
function openMyBlog() {
window.location.href = 'https://www.jianshu.com/u/263c210b047c'
}<a href="http://www.baidu.com" title="baidu" target="_blank">新标签页打开百度</a>
<a href="http://www.baidu.com" title="baidu" >当前页打开百度</a>
<button onclick='openMyBlogNewTarget()'>新标签打开我的博客</button>
<button onclick="openMyBlog()">打开我的博客</button>Android代码
private class MYWebViewClient extends WebViewClient {
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
// 新方法 API21以后
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
super.shouldOverrideUrlLoading(view, request);
// 拦截Request
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Log.d(TAG, "shouldOverrideUrlLoading: " + request.getUrl().toString());
}
return true;
}
// 旧方法 兼容API21之前
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
super.shouldOverrideUrlLoading(view, url);
// 拦截url
Log.d(TAG, "shouldOverrideUrlLoading: " + url);
return true;
}
}- JS中使用window.objects.function语法调用Native，其中objects与Native中一直。
- Native中定义Class，以及被调用的func用 public、@JavascriptInterface修饰。
- Native中
addJavascriptInterface(obj, name)。
function callNative() {
var amount = 123.5;
var orderno = "FG1afsdakewqr";
window.mobileApp.toPay(amount, orderno);
}<button onclick="window.mobileApp.sendMessage('特斯拉 Model 3')">获取商品名</button>
<button onclick="callNative()">支付按钮</button>mWebView.addJavascriptInterface(new JsInterface(tv), "mobileApp");
private class JsInterface {
private TextView showText;
public JsInterface(TextView tv) {
showText = tv;
}
@JavascriptInterface
public void sendMessage(String msg) {
Log.d(TAG, "sendMessage: " + msg);
}
@JavascriptInterface
public void toPay(float amount, String oderno) {
Log.d(TAG, "sendMessage: " + amount);
}
}方案三:引用JsBridge框架
- JS中调用
window.WebViewJavascriptBridge.send或者window.WebViewJavascriptBridge.callHandler向Native发消息 - Native中注册指定接收
WebView.registerHandler或者注册默认接收WebView.setDefaultHandler
//js传递数据给java
function jsCallNativeDefault() {
window.WebViewJavascriptBridge.send({ 'param': "str1" }, function(responseData) { //处理java回传的数据
});
}
function jsCallNativeSpec() {
window.WebViewJavascriptBridge.callHandler(
'Spec' //指定接收参数 submitFromWeb与java一致
,'指定接收'
,function(responseData) { //处理java回传的数据
});
}mWebView.registerHandler("Spec", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
Log.i("", "handler = submitFromWeb, data from web = " + data);
function.onCallBack("submitFromWeb exe, response data 中文 from Java");
showTextView.setText("指定接收:" + data);
}
});
mWebView.setDefaultHandler(new DefaultHandler() {
@Override
public void handler(String data, CallBackFunction function) {
Log.i("", "handler = submitFromWeb, data from web = " + data);
function.onCallBack("submitFromWeb exe, response data 中文 from Java");
showTextView.setText("默认接收:" + data);
}
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent