WebViewJavascriptBridge：让原生iOS与网页元素互相通信
简介
提供在webView中, 原生iOS 与 网页元素互相通信的能力.
入门
使用环境
- iOS4 +
安装
直接将WebViewJavascriptBridge 文件夹拖进你的工程在弹出的复选框中,不要选”Copy items into destination group’s folder””,要使用”Create groups for any folders.
使用
导入头文件,并声明变量属性.
|
1 2 3 4 5 6 7 8 |
#import “WebViewJavascriptBridge.h" @property (nonatomic, retain) WebViewJavascriptBridge* bridge; //可也以设置某个WVJBResponseCallback 属性 例如:@property (copy, nonatomic) WVJBResponseCallback shanchuCallback //加载你的URL [self.webView loadRequest:urlReq]; //urlReq内容 可以是从网上的链接,也可以是嵌套在应用包里的html 页面,根据需求 |
使用UIWebview 或 WebView初始化这个WebViewJavascriptBridge
|
1 2 3 4 5 6 |
// 这是WebViewJavascriptBridge 最基础的初始化操作,只需执行一次,不建议调用多次,只需初始化一次即可. self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView handler:^(id data, WVJBResponseCallback responseCallback) { NSLog(@"Received message from javascript: %@", data); responseCallback(@"Right back atcha"); }]; |
应用响应web页事件(javascript调用app内方法),通过registerHandler 来实现,一个响应事件只需初始化一次即可.例如:
|
1 2 3 4 5 6 7 |
[_bridge registerHandler:@“相应web页上某个点击事件的方法名称,该名称需和web端人员制定" handler:^(id data, WVJBResponseCallbackresponseCallback) { NSLog(@"这个方法 called: %@", data); //data 是web页给你传递的数据,可以为空,根据需求制定 //responseCallback是你响应该事件后返回给web页的数据,可以不返回 例如: responseCallback (@{@"result":[NSNumber numberWithInt:1]}); }]; |
通过ObjC 向 javascript发送消息
|
1 2 3 4 5 |
[self.bridge send:@"Well hello there”]; //这是不需要web回调的事件 [self.bridge send:@"Give me a response, will you?" responseCallback:^(id responseData) { NSLog(@"ObjC got its response! %@", responseData); }]; //这个是在发送给web页后,具有回调事件的方法.根据需求 |
最后设置javascript端
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
//一般不需要iOS 开发人员来设置,因为是与web页交互,这个是exmple中的例子,web开发导入或设置响应的js就可以了 //js方法 function connectWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { document.addEventListener('WebViewJavascriptBridgeReady', function() { callback(WebViewJavascriptBridge) }, false) } } // connectWebViewJavascriptBridge(function(bridge) { /* 初始化brige */ 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) }) }) |
开源地址：https://github.com/marcuswestin/WebViewJavascriptBridge
资源整理者简介：yilufeng0
