开发中可能会遇到与H5页面交互的情况,在这里就简单介绍一下怎么与H5交互
iOS与HTML5的交互方式
iOS与H5的交互方式大概有以下5种:
- 利用WKWebView进行交互(系统API)
- 利用UIWebView进行交互(系统API)
- 苹果的javascriptcore.framework框架;
- 跨平台cordova框架;
- 第三方WebViewJavascriptBridge
本篇文章就来讲讲WebViewJavascriptBridge的简单使用。
WebViewJavascriptBridge的使用
- 在Github上下载
WebJavaScriptBridge - 解压缩包,将
WebViewJavascriptBridge文件夹拖到你的工程中 - 在需要使用
WebViewJavascriptBridge的类文件中引入头文件WebViewJavascriptBridge.h
使用方式
HTML页面中需要完成的工作
1.在HTML文件中添加下方代码,这段代码是固定的,必须添加的：
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 = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
2.设置JS与OC交互时的命令字：
// 无参数时,用下列方式
window.WebViewJavascriptBridge.callHandler('Set')
// 单个参数时,用下列方式
// window.WebViewJavascriptBridge.callHandler('Set','参数')
// 多参数时,用下列方式
// window.WebViewJavascriptBridge.callHandler('Set', {'参数1': '111', '参数
3.设置OC与JS交互时的接收方法与命令字：
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('Get', function(data, responseCallback) {
alert(data);
})
})
OC控制器中需要完成的工作
1.向控制器中引入文件WebViewJavascriptBridge.h
2.加载HTML文件
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"WebViewJavascriptBridgeDemo" ofType:@"html"]]]];
3.初始化WebViewJavascriptBridge
@property (nonatomic, strong) WebViewJavascriptBridge *bridge;
...
self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
// 若要实现WebViewDelegate要添加这句绑定代码
// [self.bridge setWebViewDelegate:self];
4.根据命令字设置JS发数据给OC的方法
[self.bridge registerHandler:@"Set" handler:^(id data, WVJBResponseCallback responseCallback) {
//这里的data为JS发送给OC的数据
}];
5.根据命令字设置OC发数据给JS的方法
[self.bridge callHandler:@"Get" data:@"OC已接受"];
效果如下：
希望这篇文章对各位看官有所帮助，Demo下载地址：Demo
