WebViewJavascriptBridge-Obj-C和JavaScript互通消息的桥梁
来源:互联网 发布:知之一字 众妙之门 编辑:程序博客网 时间:2024/06/06 17:44
本文翻译自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.这个列表不完整,你可以随意添加.
Facebook Messenger
Facebook Paper
Yardsale
EverTrue
Game Insight
Altralogica
Sush.io
Flutterby Labs
JD Media’s 鼎盛中华
Dojo4’s Imbed
CareZone
Hemlig
安装& 例子 (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
)
bridge.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互通消息的桥梁
- WebViewJavascriptBridge-Obj-C和JavaScript互通消息的桥梁
- WebViewJavascriptBridge-Obj-C和JavaScript互通消息的桥梁
- github Object-C javascript 消息互通 WebViewJavascriptBridge
- WebViewJavascriptBridge是一个Objective-C与JavaScript进行消息互通的三方库
- Obj-C与javascript交互之WebViewJavascriptBridge
- Obj-C与javascript交互之WebViewJavascriptBridge
- Obj-C与javascript交互之WebViewJavascriptBridge
- Objective-C 编程语言(13)远程消息---Obj-C 对远程消息的支持(指针参数、代理和拷贝)
- Objective-C 与 Javascript 交互之 WebViewJavascriptBridge
- WebViewJavascriptBridge的使用和原理
- WebViewJavascriptBridge的使用和封装
- AS3 Flex Flash和javascript互通的例子
- Obj-C的多态性、动态类型和动态绑定
- Obj-C的多态性、动态类型和动态绑定
- 奇技淫巧之Delphi和JavaScript互通
- 通过RTTI使Delphi和JavaScript互通
- WebViewJavascriptBridge 实现js和java的交互
- Junit单元测试
- Windwos 桌面个别程序图标不显示的的问题
- php之smarty学习四
- 黑客应用之:net使用方法(1)
- 263. Ugly Number
- WebViewJavascriptBridge-Obj-C和JavaScript互通消息的桥梁
- 【C++】深度探索C++对象模型之类存储
- 开源项目Make Point
- 不使用quartz实现定时,使用@Scheduled注解实现定时--一次配置到处使用
- Nutz中过滤特殊字符
- nginx 或tengine 访问日志分割处理
- ios uiwindow 的用法
- Node Eviction due to OLOGGERD High CPU
- 试题01 A+B和C