转载至:http://www.cocoachina.com/ios/20150629/12248.html

译者:@coderyi9

本文翻译自Marcus Westin的开源框架WebViewJavascriptBridge的readme,英文原文链接https://github.com/marcuswestin/WebViewJavascriptBridge.

WebViewJavascriptBridge是Obj-C和JavaScript通过UIWebViews/WebViews互通消息的一个iOS/OSX的桥梁. 如果你喜欢WebViewJavascriptBridge,你可能也想check outWebViewProxy.

Obj-C和JavaScript原理简单说一下,Obj-C调用JavaScript很简单,可以通过webview的stringByEvaluatingJavaScriptFromString:方法调用JavaScript代码;JavaScript调用Obj-C,则是通过web view的代理方法shouldStartLoadWithRequest:来接收JavaScript的网络请求从而实现调用。

正在使用WebViewJavascriptBridge的项目

有很多的公司和项目在使用WebViewJavascriptBridge.这个列表不完整,你可以随意添加.

安装& 例子 (iOS & OSX)

首先打开Example Apps文件夹.打开iOS或者OSX的工程然后点击运行.

在你自己的工程中用WebViewJavascriptBridge:

1) 拖动 WebViewJavascriptBridge 文件夹到你的工程中.

在出现的对话框中, 取消 (我觉得应该是选中)”Copy items into destination group’s folder” 并且 选择 “Create groups for any folders”

2) 引入头文件并且申明一个属性:

#import "WebViewJavascriptBridge.h" 
... 
@property WebViewJavascriptBridge* bridge;

3) 实例化WebViewJavascriptBridge并且带上一个UIWebView (iOS)或者WebView (OSX):

self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"Received message from javascript: %@", data);
responseCallback(@"Right back atcha");
}];

4) 首先从ObjC到javascript发送一些消息:

[self.bridge send:@"Well hello there"];
[self.bridge send:[NSDictionary dictionaryWithObject:@"Foo" forKey:@"Bar"]];
[self.bridge send:@"Give me a response, will you?" responseCallback:^(id responseData) {
NSLog(@"ObjC got its response! %@", responseData);
}];

5) 然后,看看javascript这边:

function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener('WebViewJavascriptBridgeReady', function() {
callback(WebViewJavascriptBridge)
}, false)
}
}
connectWebViewJavascriptBridge(function(bridge) {
/* Init your app here */
bridge.init(function(message, responseCallback) {
alert('Received message: ' + message)
if (responseCallback) {
responseCallback("Right back atcha")
}
})
bridge.send('Hello from the javascript')
bridge.send('Please respond to this', function responseCallback(responseData) {
console.log("Javascript got its response", responseData)
})
})

Contributors & Forks

Contributors: https://github.com/marcuswestin/WebViewJavascriptBridge/graphs/contributors

Forks: https://github.com/marcuswestin/WebViewJavascriptBridge/network/members

API 参考

ObjC API

[WebViewJavascriptBridge bridgeForWebView: (UIWebView/WebView*)webview handler:(WVJBHandler)handler]

[WebViewJavascriptBridge bridgeForWebView:

(UIWebView/WebView*)webview webViewDelegate:

(UIWebViewDelegate*)webViewDelegate handler:(WVJBHandler)handler]

给web view创建一个javascript的桥梁.

假如javascript需要一个反馈,那么 WVJBResponseCallback 不能为 nil .

当然,通过 webViewDelegate:(UIWebViewDelegate*)webViewDelegate 你可以得到web view的生命周期事件.

例子:

[WebViewJavascriptBridge bridgeForWebView:webView handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"Received message from javascript: %@", data);
if (responseCallback) {
responseCallback(@"Right back atcha");
}
}]
[WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) { /* ... */ }];

[bridge send:(id)data]

[bridge send:(id)data responseCallback:(WVJBResponseCallback)responseCallback]

发送一个消息给javascript. 并且在发送消息成功后可以通过 responseCallback block做出一 些反应.

例子:

[self.bridge send:@"Hi"];
[self.bridge send:[NSDictionary dictionaryWithObject:@"Foo" forKey:@"Bar"]];
[self.bridge send:@"I expect a response!" responseCallback:^(id responseData) {
NSLog(@"Got response! %@", responseData);
}];

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

注册一个叫做 handlerName 的handler. javascript能够通过 WebViewJavascriptBridge.callHandler(“handlerName”) 调起这个handler.

例子:

[self.bridge registerHandler:@"getScreenHeight" handler:^(id data, WVJBResponseCallback responseCallback) {
responseCallback([NSNumber numberWithInt:[UIScreen mainScreen].bounds.size.height]);
}];

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

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

调起javascript叫做 handlerName的handler. 在调用 handler成功后可以通过responseCallback block做出反应.

例子:

[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);
}];

定义 bundle

WebViewJavascriptBridge 要求 WebViewJavascriptBridge.js.txt 文件嵌入到web view来创建一个在JS这边的桥梁.标准的实现是用 mainBundle 找到这个文件.如果你建立一个 静态库并且你把这个文件放在其他地方,你可以用下面的方法找 WebViewJavascriptBridge.js.txt 文件:

[WebViewJavascriptBridge bridgeForWebView:

(UIWebView/WebView*)webView webViewDelegate:

(UIWebViewDelegate*)webViewDelegate handler:(WVJBHandler)handler

resourceBundle:(NSBundle*)bundle

例子:

[WebViewJavascriptBridge bridgeForWebView:_webView
webViewDelegate:self
handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"Received message from javascript: %@", data);
}
resourceBundle:[NSBundle bundleWithURL:[[NSBundle mainBundle] URLForResource:@"ResourcesBundle" withExtension:@"bundle"]]
];

Javascript API

document.addEventListener(‘WebViewJavascriptBridgeReady’,

function onBridgeReady(event) { … }, false)

一直等待 WebViewJavascriptBridgeReady DOM 事件.

例子:

document.addEventListener('WebViewJavascriptBridgeReady', function(event) {
var bridge = event.bridge
// Start using the bridge
}, false)

ridge.init(function messageHandler(data, response) { … })

初始化这个桥. 这会调起 ‘WebViewJavascriptBridgeReady’ 的事件handler.

这个 messageHandler 函数会接收通过ObjC的 [bridge send:(id)data] 和 [bridge send:(id)data responseCallback:(WVJBResponseCallback)responseCallback] 方法 发送的所有消息.

如果ObjC发送消息时有WVJBResponseCallback block,那么可以通过response对象发送消息.

例子:

bridge.init(function(data, responseCallback) {
alert("Got data " + JSON.stringify(data))
if (responseCallback) {
responseCallback("Right back atcha!")
}
})

bridge.send(“Hi there!”)

bridge.send({ Foo:”Bar” })

bridge.send(data, function responseCallback(responseData) { …

})

给ObjC发送消息. 在发送成功后可以通过 responseCallback 函数做出反应.

例子:

bridge.send("Hi there!")
bridge.send("Hi there!", function(responseData) {
alert("I got a response! "+JSON.stringify(responseData))
})

bridge.registerHandler(“handlerName”, function(responseData) { … })

注册一个叫做 handlerName 的handler. ObjC能够通过 [bridge callHandler:”handlerName” data:@”Foo”] 和 [bridge callHandler:”handlerName” data:@”Foo” responseCallback:^(id responseData) { … }] 两个方法调起这个handler.

例子:

bridge.registerHandler("showAlert", function(data) { alert(data) })
bridge.registerHandler("getCurrentPageUrl", function(data, responseCallback) {
responseCallback(document.location.toString())
})

iOS4 支持 (包括 JSONKit)

注:iOS4支持尚未在V2 +测试.

WebViewJavascriptBridge 默认使用 NSJSONSerialization .如果你需要iOS 4的支持,你可以用JSONKit,并且增加 USE_JSONKIT 的预处理宏到你的工程中.

WebViewJavascriptBridge-Obj-C和JavaScript互通消息的桥梁的更多相关文章

  1. JavaScript的消息机制

    JavaScript本身是单线程的,但它却是事件驱动的.类似Windows窗体应用程序,它也需要消息队列机制来实现.程序的执行并不是连续的,绝大多数时间都在等待消息.每次执行执行程序都是在响应消息,这 ...

  2. javascript使用消息框

    之前很多地方都用过alert,它的作用是弹出一个警告框,我们调用的方法是alert("输入的内容");其实更正确的写法是 window.alert("输入的内容" ...

  3. 奇技淫巧之Delphi和JavaScript互通

    http://www.raysoftware.cn/?p=305 Delphi2010以后增加了新的RTTI信息,也就是通过RTTI可以在运行时获取/调用对象的公开成员或者函数. ScriptCont ...

  4. delphi与javascript互通

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  5. JS_call_APP native 与 html的交互

    1.***** 特点:下个版本的交互准备使用这个(http://www.knowsky.com/884428.html) https://github.com/lifei321/JS-OC http: ...

  6. Hybrid App: 看看第三方WebViewJavascriptBridge是如何来实现Native和JavaScript交互

    一.简介 在前面两篇文章中已经介绍了Native与JavaScript交互的几种方式,依次是JavaScriptCore框架.UI组件UIWebView.WebKit框架,这几种方式都是苹果公司提供的 ...

  7. javascript消息框

    JavaScript有三种消息框: 警告框:alert() alert("我是警告框!!") 确认框:confirm() function show_confirm() { var ...

  8. WebViewJavascriptBridge浅析

    WebViewJavascriptBridge是一个Objective-C与JavaScript进行消息互通的三方库.通过WebViewJavascriptBridge,我们可以很方便的实现OC和Ja ...

  9. Android混合开发之WebViewJavascriptBridge实现JS与java安全交互

    前言: 为了加快开发效率,目前公司一些功能使用H5开发,这里难免会用到Js与Java函数互相调用的问题,这个Android是提供了原生支持的,不过存在安全隐患,今天我们来学习一种安全方式来满足Js与j ...

随机推荐

  1. 一、安装JDK和Tomcat

    一.安装JDK和Tomcat 1,安装JDK:直接运行jdk-7-windows-i586.exe可执行程序,默认安装即可. 备注:路径可以其他盘符,不建议路径包含中文名及特殊符号. 2.安装Tomc ...

  2. HTML DOM元素

    HTML DOM元素 1.创建新的HTML元素 向HTML DOM添加新元素,必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <!DOCTYPE html> <h ...

  3. SQL数据库约束行为---防止数据乱填(即数据规范化)

    防止乱填:一.Check约束.按照某种规则对数据进行检查.操作:在表的设计界面中,右击相应的列,选择“CHECK约束”在弹出的对话框中,设置约束的名称和表达式. 代码实现: create table ...

  4. 【leetcode❤python】169. Majority Element

    #Method 1import math class Solution(object):    def majorityElement(self, nums):        numsDic={}   ...

  5. Cheatsheet: 2013 08.01 ~ 08.13

    Mobile Objective C Blocks: Summary, Syntax & Best Practices Android SDK: Create an Arithmetic Ga ...

  6. FastReport处理空日期

    [IIf([D.ApproveDate]==DateTime.MinValue,"",[D.ApproveDate])]

  7. BOM DOM

    http://www.cnblogs.com/yexiaochai/archive/2013/05/28/3102674.html DOM Document Object Model 文档对象模型 一 ...

  8. Freebie: Date Picker Calendar Demo Form For Oracle Forms 6i

    I have already posted and provided the required PLSQL Library and the Calendar FMX file in my previo ...

  9. 格式化时间(SimpleDateFormat)

    import java.text.SimpleDateFormat; import java.util.Date; public class Main{ public static void main ...

  10. C# 十进制与十六进制互转

    1.从十六进制转换为十进制 /// <summary> /// 十六进制转换到十进制 /// </summary> /// <param name="hex&q ...