iOS JSBridge技术手段衍化整理

背景

之前一段时间在对项目里的 JSBridge 进行整理和优化,突然想到想整理一下 JSBridge 在 iOS 系统版本衍化过程中所出现过的主要技术手段。
绝大多数 APP 都逃不开 H5 开发或加载网页的需求。JSBridge 应用于 Web 和 Native 两端的交互,所以也是 Hybrid APP (混合移动端应用)运作的核心层级。
可以说 JSBridge 是 iOS 开发者的必修课。

JSBridge

JSBridge 即利用 JavaScript 语言,令 Web 和 Native 两端可以进行交互的桥接层。一个完整的 JSBridge 方案需要对所有两端交互的技术手段进行选型、优化和整合。这里我们只讨论 iOS 和 Web 端的交互手段。

JavaScriptCore

任何一个移动端系统的 WebKit 都会默认内嵌各自的 JS 引擎,它们的工作就是对 JS 脚本进行编译与运行( JS 虚拟机,用来分析词汇与语法生成 ByteCode (指令字节码)并运行,和负责运行时的内存空间开辟、管理等等)。
JS 引擎是实现 JSBridge 核心,而 iOS/OS 端对应的 JS 引擎是 JavaScriptCore 。



在 iOS 7 以后,苹果对 WebKit 中的 JavaScriptCore 框架进行 Objective-C 的封装并提供给开发者。所以在 iOS 端中, JSBridge 使用的技术手段也以 iOS 7 为临界点分为两个阶段。

Before iOS 7

iOS call Web

UIWebView 提供了 stringByEvaluatingJavaScriptFromString:

// NOTE: Returns the result of running a JavaScript script
- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

用来在当前网页执行一段 JS 脚本并以字符串的形式返回调用结果:

// NOTE: 获取当前url
NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];
// NOTE: 获取当前网页标题
NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"]; 

// NOTE: 注入自定义方法jsFunction()
NSString *jsFunction = @";(function() {function jsFunction(){return 'Hello World';})();";
[webView stringByEvaluatingJavaScriptFromString:js];//注入js方法
// NOTE: 调用自定义方法jsFunction并获取回调结果
NSString *resultString = [webView stringByEvaluatingJavaScriptFromString:@"jsFunction()"];

Web call iOS

拦截 URL

iOS 7 之前,基本上都是使用拦截 URL 的方案来实现 Web call iOS。

1 . iframe.src (重定向)

HTML内联框架元素