在移动互联网的时代，开发移动端的前端页面是前端同学一项必不可少的技能了。而涉及到与原生移动端的交互，除了一些 WEEX、React Native 这种技术外，最常用也是最快捷的方式就是 JSBridge 了。所以，作为前端非常有必要了解一下 JSBridge 的运作原理。
移动端的浏览器控件
当下主流的移动端操作系统无疑是 Android 和 IOS。而这两者分别都提供了各自承载网页的控件 WebView（IOS 里面是 UIWebView 和 WKWebView）。下面简单介绍下浏览器控件。
Android WebView
Android 的 WebView 能够像其他的浏览器 APP 一样显示网页并对页面做一些基础的操作。由于历史原因，Android WebView 采用了两种不同的内核。
在 Android 4.4 以下(不包含 4.4)系统 WebView 底层实现是采用 WebKit(http://www.webkit.org/) 内核，而在 Android 4.4 及其以上 Google 采用了 chromium(http://www.chromium.org/) 作为系统WebView的底层内核支持。
所以，如果需要适配 4.4 以下机型需要做好样式和JS的适配兼容工作。
IOS 的 UIWebView 和 WKWebView
在 IOS 中也是由于历史原因，出现了两个 WebView 控件。 UIWebView 是自 IOS2 就有的，而 WKWebView 从 IOS8 才有。WKWebView 使用的是 Safari 浏览器内核，相比于笨重的 UIWebView 性能更佳。
如果需要支持 IOS8 之前的版本，只好去兼容 UIWebView ，而在 IOS8+ 的版本中，就有 UIWebView 和 WKWebView 两种选择了（具体看 native 端的实现选择）。
简单介绍了下两个操作系统的浏览器控件的情况，更佳具体的移动前端问题可以参考我之前整理的2018 年最新的移动前端资料整理（不断更新）
一文。
JSBridge 原理及实现
具体的原理在有赞前端的# H5与Native交互之JSBridge技术 一文中讲的非常清楚，不多赘述。简单说下：
IOS 调用 JavaScript 方法
在 IOS 中使用 stringByEvaluatingJavaScriptFromString 方法直接调用挂载在前端 window 下的方法，并获取方法返回的数据。
webview.stringByEvaluatingJavaScriptFromString("Math.random()")
JavaScript 调用 IOS 方法
有两种方法可以实现 JavaScript 调用 IOS 方法这个行为：
1. 在 JavaScript 中使用创建一个 iframe 请求 URL 的方式将带有 scheme 的 URL 传给 IOS。
var url = 'jsbridge://doAction?title=分享标题&desc=分享描述&link=http%3A%2F%2Fwww.baidu.com';
var iframe = document.createElement('iframe');
iframe.style.width = '1px';
iframe.style.height = '1px';
iframe.style.display = 'none';
iframe.src = url;
document.body.appendChild(iframe);
setTimeout(function() {
iframe.remove();
}, 100);
IOS 在 WebView 获取到网页 URL 请求时将 scheme 码的 URL 拦截下来去做 native 方法的处理。
func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool {
print("shouldStartLoadWithRequest")
let url = request.URL
let scheme = url?.scheme
let method = url?.host
let query = url?.query
if url != nil && scheme == "jsbridge" {
print("scheme == \(scheme)")
print("method == \(method)")
print("query == \(query)")
switch method! {
case "getData":
self.getData()
case "putData":
self.putData()
case "gotoWebview":
self.gotoWebview()
case "gotoNative":
self.gotoNative()
case "doAction":
self.doAction()
case "configNative":
self.configNative()
default:
print("default")
}
return false
} else {
return true
}
}
2. 对于 WKWebView 有另外的解决方案：iOS下OC与JS的交互(WKWebview-MessageHandler实现)
简单说下实现逻辑：在 IOS 中使用 addScriptMessageHandler 方法定义 MessageHandler。
[userContentController addScriptMessageHandler:self name:@"Share"];
[userContentController addScriptMessageHandler:self name:@"Camera"];
其中的 Share 和 Camera 是 MessageHandler 的 name 属性。在 JS 端的使用 MessageHandler 的方式如下：
window.webkit.messageHandlers.<name>.postMessage(<messageBody>)
最后回到 IOS 端根据 MessageHandler 的 name 获取它的 body 并处理执行相应操作行为。
if ([message.name isEqualToString:@"Share"]) {
[self ShareWithInformation:message.body];
} else if ([message.name isEqualToString:@"Camera"]) {
[self camera];
}
Android 调用 JavaScript 方法
在 Android 中直接使用 loadUrl 方法即可调用 JavaScript 中 window 对象上的方法。
webView.loadUrl("javascript:JSBridge.trigger('webviewReady')");
JavaScript 调用 Android 方法
有 3 种方法：
- 通过 shouldOverrideUrlLoading 方法处理 URL 的 scheme 码，做法类似 IOS 的通信方式。
- Android 中有一个 JSInterface 类可以直接注入原生 JS 代码。
class JSInterface {
@JavascriptInterface //注意这个代码一定要加上
public String getUserData() {
return "UserData";
}
}
webView.addJavascriptInterface(new JSInterface(), "AndroidJS");
上面的代码就是在页面的 window 对象里注入了 AndroidJS 对象。在js里可以直接调用
alert(AndroidJS.getUserData()) //UserDate
- 使用
prompt,console.log,alert方式。
LJBridge 学习
m-base 源码简析
说了这么多，作为前端最关注必然不是 Native 端如何实现，而是 JavaScript 端如何与 Native 端通信啦。下面来看看链家的 JSBridge 源码方法：
function tryCatch(callback) {
// try…catch 执行 Native 方法
}
function setBridgeInstance(bridge) {
// 设置 JSBridge 实例
}
function setBridgeInstanceForWK(bridge) {
// 设置 JSBridge 实例（适配 WKWebView）
}
function do_callback() {
// 执行 ready 方法中的回调函数
}
function bindSysSchema(evt){
// 绑定系统 scheme （打电话和发短信）
}
// 在 window 对象中定义 ljBridge 来使用 JSBridge
window.$ljBridge = {
ready: function() {},
webStatus: webStatus
}
// 初始化逻辑
if (isApp) {
// 将 APP 数据保存 cookie
// 获取 bridgeInstance
// 设置 Title、RightButton、ShareConfig
} else {
// 非 APP 环境调试
}
LJBridge 如何通信
基于一开始讲过的 JSBridge 通信原理，我们来理解下 m-base 源码中的通信。
所有在 H5与APP通信文档（JS bridge） 文档中接口方法都可以在 setBridgeInstance 和 setBridgeInstanceForWK 方法中看到。
JS 获取 Native 端数据
在这些方法中，像 getNetwork、getDeviceId 这类获取 Native 信息的方法都是直接获取注入的 window.HybridBridgeLJ 对象中的数据。
// 获取APP注入的用户device id
bridgeInstance.getDeviceId = function() {
return objectValueFromPath(bridge, 'staticData.deviceId');
};
// 获取APP版本
bridgeInstance.getAppVersion = function() {
return objectValueFromPath(bridge, 'staticData.appVersion');
};
// 获取APP网络状态
bridgeInstance.getNetwork = function() {
return objectValueFromPath(bridge, 'staticData.network');
};
// 获取APP的协议
bridgeInstance.getScheme = function() {
return objectValueFromPath(bridge, 'staticData.scheme');
};
往 Android 中注入 JS 上面已经介绍了，而往 IOS 中注入 JS 可以查看 WKWebview：与JS交互数据传值、Cookies的注入与清除 一文。
JS 调用 Native 端方法
像 setRightButton、setCity 这些 JavaScript 调用 Native 方法的行为，有两种不同的方式：
第一种是直接调用注入的 window.HybridBridgeLJ 对象中的方法，原理上面提到过的 JavaScript 调用 Android 方法的第 2 条。
bridge.setShareConfigWithString(paramString);
第二种是针对 WKWebView 的 MessageHandler 形式进行 JS 到 Native 端的通信。
window.webkit.messageHandlers.lianjia.postMessage(JSON.stringify({
"type": "setShareConfig",
"param": paramString
}));
LJBridge 的 ready 方法
ready 是在 JSBridge 的 JS 文件加载完成后可以被调用，以获取 bridge 对象进行通信。
下面是 ready 方法的使用及其源码：
$ljBridge.ready((bridge, webStatus) => {
// ...
})
// 可以定义 ready 方法和 web 状态值
window.$ljBridge = {
ready: function(fn, context) {
callbacks.push(arguments.length > 1 ? {
fn: fn,
context: context
} : {
fn: fn
});
requestAnimationFrame(do_callback);
},
webStatus: webStatus
}
var callbacks = [];
// 执行回调函数
function do_callback() {
if (bridgeInstance === null) return
var callback
while (callback = callbacks.shift()) {
var fn = callback.fn;
try {
if ('context' in callback) {
fn.call(callback.context, bridgeInstance, webStatus);
} else {
fn(bridgeInstance, webStatus);
}
} catch (e) {
if ('console' in window) {
console.error ? console.error(e) : console.log(e);
}
}
}
}
最后
最后总结一下：
- Android 有一个 WebView 控件，注意 4.4 版本前后的浏览器内核差异。
- IOS 有 UIWebView 和 WKWebView 两个浏览器，两者对于 JS 的通信方式是不同的。
- JS 调用 Android 有 3 种方法
- JS 调用 IOS 有 2 种方法，对应 UIWebView 和 WKWebView
- Android 和 IOS 都可以往 JS 的 window 对象中注入数据对象。
- 链家 JSBridge 也是使用了以上的方案来实现。
