此项目,主要演示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); } });