ios lighttpd-atv php54 iosweb,iOS与H5交互之WebViewJavascriptBridge

开发中可能会遇到与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