一个 iOS/OSX 桥接器，用于在 WKWebViews、UIWebViews 和 WebViews 之间发送消息。

迁移指南

从 v5.0.x 版本升级到 6.0.x 版本时，您必须更新 setupWebViewJavascriptBridge JavaScript 段。请参阅 https://github.com/marcuswestin/WebViewJavascriptBridge#usage 部分第 4 部分。

谁使用 WebViewJavascriptBridge？

WebViewJavascriptBridge 被许多公司和项目使用。以下是一个简短而不完整的样本列表

• Facebook Messenger
• Facebook Paper
• Yardsale
• EverTrue
• Game Insight
• Sush.io
• Imbed
• CareZone
• Hemlig
• Altralogica
• 鼎盛中华
• FRIL
• 留白·WHITE
• BrowZine
• ... 以及更多！

安装（iOS & OSX）

手动安装

将 WebViewJavascriptBridge 文件夹拖到您的项目中。

在出现的对话框中，取消选中“将项目复制到目标组的文件夹中”，并选择“为任何文件夹创建组”。

示例

请参阅 Example Apps/ 文件夹。打开 iOS 或 OSX 项目，并运行以查看其实际应用效果。

要在您的项目中使用 WebViewJavascriptBridge

使用方法

1) 导入头文件并声明一个 ivar 属性

#import "WebViewJavascriptBridge.h"

...

@property WebViewJavascriptBridge* bridge;

2) 使用 WKWebView、UIWebView（iOS）或 WebView（OSX）实例化 WebViewJavascriptBridge

self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];

3) 在 ObjC 中注册处理程序，并调用 JS 处理程序

[self.bridge registerHandler:@"ObjC Echo" handler:^(id data, WVJBResponseCallback responseCallback) {
    NSLog(@"ObjC Echo called with: %@", data);
    responseCallback(data);
}];
[self.bridge callHandler:@"JS Echo" data:nil responseCallback:^(id responseData) {
    NSLog(@"ObjC received response: %@", responseData);
}];

4) 将 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)
}

5) 最后，调用 setupWebViewJavascriptBridge 并使用桥接器注册处理程序和调用 ObjC 处理程序

setupWebViewJavascriptBridge(function(bridge) {

    /* Initialize your app here */

    bridge.registerHandler('JS Echo', function(data, responseCallback) {
        console.log("JS Echo called with:", data)
        responseCallback(data)
    })
    bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
        console.log("JS received response:", responseData)
    })
})

自动引用计数（ARC）

这个库依赖于ARC，所以如果你的项目中使用了ARC，一切正常。但如果你的项目不支持ARC，请确保执行以下步骤

1) 在Xcode项目中打开项目设置 -> '构建阶段'

2) 展开 '编译源文件' 标题，并找到属于此库的所有 *.m 文件。请注意这些列表中每个源文件前面的 '编译器标志'

3) 为每个文件添加 '-fobjc-arc' 标志

现在所有WVJB文件都将使用ARC支持编译。

贡献者 & 分支

贡献者: https://github.com/marcuswestin/WebViewJavascriptBridge/graphs/contributors

分支: https://github.com/marcuswestin/WebViewJavascriptBridge/network/members

API 参考

ObjC API

[WebViewJavascriptBridge bridgeForWebView:(WKWebVIew/UIWebView/WebView*)webview

为指定的web视图创建一个javascript桥。

示例

[WebViewJavascriptBridge bridgeForWebView:webView];

[bridge registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler]

注册一个名为 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);
}];

[bridge callHandler:(NSString*)handlerName data:(id)data]

[bridge callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)callback]

调用名为 handlerName 的JavaScript处理程序。如果有 responseCallback 块，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视图的生命周期事件，可以可选地设置 WKNavigationDelegate/UIWebViewDelegate。

[bridge disableJavscriptAlertBoxSafetyTimeout]

不安全。通过禁用setTimeout安全检查来加快桥消息传递。只有在你没有调用任何javascript弹出框函数（alert、confirm和prompt）的情况下，才能禁用此安全检查。如果你从桥接的javascript代码中调用这些函数，则应用将挂起。

示例

[self.bridge disableJavscriptAlertBoxSafetyTimeout];

JavaScript API

bridge.registerHandler("handlerName", function(responseData) { ... })

注册一个名为 handlerName 的处理程序。ObjC可以随后调用此处理程序，使用 [bridge callHandler:"handlerName" data:@"Foo"] 和 [bridge callHandler:"handlerName" data:@"Foo" responseCallback:^(id responseData) { ... }]。

示例

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) { ... })

调用名为handlerName的ObjC处理程序。如果提供了responseCallback函数，ObjC处理程序可以做出响应。

示例

bridge.callHandler("Log", "Foo")
bridge.callHandler("getScreenHeight", null, function(response) {
    alert('Screen height:' + response)
})

bridge.disableJavscriptAlertBoxSafetyTimeout()

调用bridge.disableJavscriptAlertBoxSafetyTimeout()的效果与在ObjC中调用[bridge disableJavscriptAlertBoxSafetyTimeout];相同。

示例

bridge.disableJavscriptAlertBoxSafetyTimeout()