- GitHub: WebViewJavascriptBridge
- Star: 12.8k
一个用于在 WKWebViews，UIWebViews（Deprecated） 和 WebViews 中的 Obj-C 和 JavaScript 之间发送消息的 iOS/OSX 桥梁。
该框架实现了 Objective-C 和 JavaScript 方法的相互调用，还可以传参和响应回调。（iOS 中，WKWebView 的原生方法不支持回调！）
安装
通过 CocoaPods 安装，将以下代码添加到 podfile 文件中并运行 pod install 来安装。
pod 'WebViewJavascriptBridge', '~> 6.0'
用法
- 导入头文件并声明一个实例变量：
#import <WKWebViewJavascriptBridge.h>
...
@property (nonatomic, strong) WKWebViewJavascriptBridge *bridge;
- 使用
WKWebView，UIWebView（iOS）或WebView（OSX）实例化WKWebViewJavascriptBridge对象。
self.bridge = [WKWebViewJavascriptBridge bridgeForWebView:self.webView];
- 注册一个 Objc 处理程序和一个要调用的 JS 处理程序。
// JS 调用 OC
// 注册一个让 JS 可以调用 OC 的方法
[self.bridge registerHandler:@"ObjC Echo" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"ObjC Echo called with: %@", data);
responseCallback(data);
}];
// OC 调用 JS
[self.bridge callHandler:@"JS Echo" data:nil responseCallback:^(id responseData) {
NSLog(@"ObjC received response: %@", responseData);
}];
- 复制和粘贴
setupWebViewJavascriptBridge函数到你的 JS 代码中：
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
- 最后，调用
setupWebViewJavascriptBridge方法，并使用bridge来注册 JS 处理程序和要调用的 Objc 处理程序：
setupWebViewJavascriptBridge(function(bridge) {
/* Initialize your app here */
// OC 调用 JS
// 在 JS 中可以注册让 OC 调用的方法
bridge.registerHandler('JS Echo', function(data, responseCallback) {
console.log("JS Echo called with:", data)
responseCallback(data)
})
// JS 调用 OC 的方法，方法名就是 OC 中提前注册的方法
bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
console.log("JS received response:", responseData)
})
})
API 文档
Objc API
[WKWebViewJavascriptBridge bridgeForWebView:(WKWebView*)webView];
该方法传递一个给定的 WKWebView 参数，让 Objective-C 和 JavaScript 之间建立桥梁。
[bridge registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler];
该方法会在 Objc 中注册一个名为 handlerName 的处理程序。JavaScript 就可以通过 WebViewJavascriptBridge.callHandler("handlerName") 来调用这个处理程序。
示例：
[self.bridge registerHandler:@"getScreenHeight" handler:^(id data, WVJBResponseCallback responseCallback) {
responseCallback([NSNumber numberWithInt:[UIScreen mainScreen].bounds.size.height]);
}];
[self.bridge registerHandler:@"log" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"Log: %@", data);
}];
- (void)callHandler:(NSString*)handlerName;
- (void)callHandler:(NSString*)handlerName data:(id)data;
- (void)callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback;
以上方法调用名为 handlerName 的 JavaScript 方法。如果指定了 responseCallback block 块，那么 JavaScript 还可以接收回调。
示例：
[self.bridge callHandler:@"showAlert" data:@"Hi from ObjC to JS!"];
[self.bridge callHandler:@"getCurrentPageUrl" data:nil responseCallback:^(id responseData) {
NSLog(@"Current UIWebView page URL is: %@", responseData);
}];
[bridge setWebViewDelegate:(id)webViewDelegate];
可选，如果你需要响应 web view's lifecycle events，你也可以设置 WKNavigationDelegate/UIWebViewDelegate 代理。
[bridge disableJavscriptAlertBoxSafetyTimeout];
不安全。通过禁用 setTimeout 安全检查来加速桥接消息的传递。仅当您不调用任何 javascript 弹出框功能（警告，确认和提示）时，才能禁用此安全检查。如果您从桥接的 javascript 代码中调用这些功能中的任何一个，则该应用将挂起。
JavaScript API
bridge.registerHandler("handlerName", function(responseData) { ... })
在 JavaScript 上注册一个名为 handlerName 的处理程序，Objc 就可以通过：
- (void)callHandler:(NSString*)handlerName;
- (void)callHandler:(NSString*)handlerName data:(id)data;
- (void)callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback;
这三个实例方法来调用 JS 函数。
示例：
bridge.registerHandler("showAlert", function(data) { alert(data) })
bridge.registerHandler("getCurrentPageUrl", function(data, responseCallback) {
responseCallback(document.location.toString())
})
bridge.callHandler("handlerName", data)
bridge.callHandler("handlerName", data, function responseCallback(responseData) { ... })
这两个是 JavaScript 调用 Objc 方法的方法，如果 Objc 中注册时设置了 responseCallback，那么 JavaScript 就可以接受回调（即调用 Objc 方法时，Objc 会有返回值返回给 JavaScript）。
示例：
bridge.callHandler("Log", "Foo")
bridge.callHandler("getScreenHeight", null, function(response) {
alert('Screen height:' + response)
})
bridge.disableJavscriptAlertBoxSafetyTimeout()
在 JavaScript 中调用 bridge.disableJavscriptAlertBoxSafetyTimeout() 方法和在 Objc 中调用 [bridge disableJavscriptAlertBoxSafetyTimeout]; 是同样的效果。
