自从iOS8之后苹果开始建议替换掉笨重的UIWebView，WKWebView 自从iOS9.0以后，更趋于完善。本文主要介绍WKwebView和js的使用WebViewJavascriptBridge的交互方法
OC 端代码
WebViewJavascriptBridge 早在很久以前就对WK进行了支持，不过本文使用的WK是6.0.2的版本，
pod 'WebViewJavascriptBridge', '~> 6.0.2'
- 关于WK的初始化 需要注意的是 在初始化的过程中不必在设置navigationDelegate的代理的。
WKWebViewConfiguration * config = [[WKWebViewConfiguration alloc] init];
// 设置进程池 用来配置同一个进程池webView的共享数据 如cookies 用户凭证等
WKProcessPool * pool = [[WKProcessPool alloc] init];
config.processPool = pool;
// 进程偏好设置
WKPreferences * prefer = [[WKPreferences alloc] init];
prefer.javaScriptEnabled = YES;
// 是否可以不进过用户交互由javascript自动打开窗口
prefer.javaScriptCanOpenWindowsAutomatically = YES;
config.preferences = prefer;
//设置内容交互控制器 用于处理JavaScript与native交互
WKUserContentController * userController = [[WKUserContentController alloc]init];
//设置处理代理并且注册要被js调用的方法名称
[userController addScriptMessageHandler:self name:@"name"];
//js注入，注入一个测试方法。
NSString *javaScriptSource = @"function userFunc(){window.webkit.messageHandlers.name.postMessage( {\"name\":\"HS\"})}";
WKUserScript *userScript = [[WKUserScript alloc] initWithSource:javaScriptSource injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];
// forMainFrameOnly:NO(全局窗口)，yes（只限主窗口）
[userController addUserScript:userScript];
config.userContentController = userController;
self.webView = [[WKWebView alloc] initWithFrame:(CGRect){0 ,0, [UIScreen mainScreen].bounds.size.width ,[UIScreen mainScreen].bounds.size.height } configuration:config];
[self.view addSubview:self.webView];
self.webView.UIDelegate = self;
/**
* 这个地方如果使用啦jsbrage 就不再需设置navigationDelegate 啦
*/
// self.webView.navigationDelegate = self;
- 初始化bridge 方法
_bridge = [WKWebViewJavascriptBridge bridgeForWebView:_webView];
// 因为这个地方设置了代理方法 所以切记在WK初始化的时候不要在设置代理了
[_bridge setWebViewDelegate:self];
- 注册js调用oc的方法
-(void)registerNativeFunction
{
[self shareInit];
}
-(void)shareInit{
// handler 中的block 参数是js要调用的oc的实现 handlerName 是oc的实现别名
[_bridge registerHandler:@"shareInit" handler:^(id data, WVJBResponseCallback responseCallback) {
// block 中是 oc中的实现方法
// data 是 js传递给oc的数据
NSLog(@"webView 使用 wkbridge 交互完成之后 返回的数据 data =%@",data);
NSString * string = @"WHAHAH";
// responseCallback 是 方法执行完毕之后返回给js的
responseCallback(string);
}];
}
- oc 调用js的方法
// oc 调用js的方法
// 不需要参数 不需要回掉方法
// [_webViewBridge callHandler:@"testJSFunction"];
// oc 传递给js有参数 不需要回掉方法
// [_webViewBridge callHandler:@"testJSFunction" data:@"miaowu"];
// oc 传递给js有参数 而且有回掉方法
[_webViewBridge callHandler:@"testJSFunction" data:@"一个字符串" responseCallback:^(id responseData) {
NSLog(@"调用完JS后的回调：%@",responseData);
}];
JS 端代码
js 在调用oc的方法之前需要首先添加一个js的方法并且调用一次改方法
- js 中必须包含
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)
}
// js 调用了一次方法注入js代码 （如果不调用一次会导致oc和js互相调用不会响应） setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('testJSFunction', function(data, responseCallback) {
alert('JS方法被调用:'+data);
responseCallback('js执行过了');
})
})
- JS 调用oc方法
function jsCallOCMeathed(){
WebViewJavascriptBridge.callHandler('shareViewShow',{'foor':'miaowu'},function(response){
alert(response);
})
}
- oc 调用js方法
setupWebViewJavascriptBridge(function(bridge) {
// 如果有其他的oc调用js的 方法 依照下面的格式进行添加就可以啦
bridge.registerHandler('testJSFunction', function(data, responseCallback) {
alert('JS方法被调用:'+data);
responseCallback('js执行过了');
})
})
