现在的项目中,界面越来越复杂,混合编程已成一个趋势,项目中嵌入H5已是必然的事,那么OC与H5交互就成一个问题了。其实交互就是OC与JS交互。
展示网页可以使用UIWebView和WKWebView两个控件,UIWebView占用的内存大,这里我们使用WKWebView来完成交互。
1.导入WebViewJavascriptBridge
使用cocoapods导入,pod ‘WebViewJavascriptBridge’
2.引入头文件
#import "WKWebViewJavascriptBridge.h"
///WKWebView
@property (nonatomic, strong) WKWebView *webView;
@property (nonatomic, strong) WKWebViewJavascriptBridge *bridge;
3.这是OC中的代码
self.webView = [[WKWebView alloc]initWithFrame:self.view.bounds];
NSURLRequest *request = [NSURLRequest requestWithURL:[[NSBundle mainBundle] URLForResource:@"demo" withExtension:@"html"]];
[self.webViewloadRequest:request];
[self.viewaddSubview:self.webView];
//初始化bridge
self.bridge = [WKWebViewJavascriptBridge bridgeForWebView:self.webView];
[self.bridgeregisterHandler:@"setData"handler:^(iddata,WVJBResponseCallbackresponseCallback) {
//这里的data为JS发送给OC的数据
NSLog(@"----------%@", data);
//OC调用JS
[_bridge callHandler:@"getData" data:@"OC传来的数据l, 哈哈哈"];
}];
4.这是HTML中的代码
//必须添加的代码
functionsetupWebViewJavascriptBridge(callback) {
if(window.WebViewJavascriptBridge) {returncallback(WebViewJavascriptBridge); }
if(window.WVJBCallbacks) {returnwindow.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
varWVJBIframe = document.createElement('iframe');
WVJBIframe.style.display ='none';
WVJBIframe.src ='wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) },0)
}
//OC调用JS
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('getData',function(data, responseCallback) {
//这里的data为OC发送给JS的数据
document.getElementById('content').innerHTML = data;
})
})
//按钮点击事件
functiongetData() {
//JS调用OC
window.WebViewJavascriptBridge.callHandler('setData','点击了按钮的事件');
}
Demo地址:Demo地址
如有不同意见请指出,共同改正。