首先创建一个WKWebView对象:initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration*)configuration,从这里面可以看出我们需要传入一个WKWebViewConfiguration对象,这里的WKWebViewConfiguration其实就是设置一些webView的配置信息,在他的属性里面我们可以看到WKPreferences *preferences,这就是设置偏好配置信息。
//创建配置信息对象
WKWebViewConfiguration*config=[[WKWebViewConfiguration alloc]init];
// 创建偏好设置对象
WKPreferences*preference=[[WKPreferences alloc]init];
//最小字体大小 当将javaScriptEnabled属性设置为NO时,可以看到明显的效果preference.minimumFontSize=0;
//设置是否支持javaScript 默认是支持的preference.javaScriptEnabled=YES;
// 在iOS上默认为NO,表示是否允许不经过用户交互由javaScript自动打开窗口,这里设置并没有什么用,后面再补充说一下
preference.javaScriptCanOpenWindowsAutomatically=YES;
config.preferences=preference;
WKWebView *wkWeb = [[WKWebView alloc] initWithFrame:rect configuration:config];
wkWeb.UIDelegate = self;
wkWeb.navigationDelegate = self;
// 设置是否允许左滑返回
wkWeb.allowsBackForwardNavigationGestures = YES;
[self.view addSubview:wkWeb];
NSString *path = [[NSBundle mainBundle] pathForResource:@"WKWeb.html" ofType:nil];
NSString *htmlString = [[NSString alloc]initWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
[wkWeb loadHTMLString:htmlString baseURL:nil];
到这里一个网页就可加载出来了,下面说一下OC和JS的交互。在WKWebViewConfiguration类中有个WKUserContentController类对象,这个类主要用来与JavaScript的交互管理。
WKUserContentController * wkUserController = [[WKUserContentController alloc] init];
// js掉起oc步骤,注册一个name为jsToOcNoPrams的js方法,设置处理接收JS方法的代理
[wkUController addScriptMessageHandler:self name:@"jsToOcWithPrams"];
config.userContentController= wkUController;
// 这里在js中调用我们注册的方法jsToOcWithPrams,这里还可以传参数
window.webkit.messageHandlers.jsToOcWithPrams.postMessage('https://www.baidu.com/');
// 这里实现代理方法,注意这里遵守WKScriptMessageHandler协议,代理是由WKUserContentControl设置 ,通过接收JS传出消息的name进行捕捉的回调方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
//用message.body获得JS传过来的参数
NSString* parameter = message.body;
if([message.name isEqualToString:@"jsToOcWithPrams"]){
// 页面按钮点击js响应,这里做对应的处理
}
}
// oc调用js方法
[wkWeb evaluateJavaScript:@"ocToJs('我传参数了......')" completionHandler:^(idresponse, NSError *error) {}];
// 在js里面实现ocToJs方法
function ocToJs(text){
console.log(text);
// 这里做一个属性测试javaScriptCanOpenWindowsAutomatically
window.open('https://www.baidu.com/');
}
这里最后说一下WKWebView默认是不支持window.open()打开新的页面,javaScriptCanOpenWindowsAutomatically属性默认是NO,设置为YES也并没有反应,这里可以实现下面方法即可使用window.open('https://www.baidu.com/');打开新的网页。
- (WKWebView*)webView:(WKWebView*)webView createWebViewWithConfiguration:(WKWebViewConfiguration*)configuration forNavigationAction:(WKNavigationAction*)navigationAction windowFeatures:(WKWindowFeatures*)windowFeatures{
if(navigationAction.targetFrame==nil|| !navigationAction.targetFrame.isMainFrame)
{
[webView loadRequest:navigationAction.request];
}
return nil;
}
最后补充,由UIWebView换为WKWebView后,会发现字体小了很多,这应该是WKWebView与html的兼容问题,解决办法是修改原网页,要么我们手动注入JS,下面代码适配文本大小
NSString *jSString = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
//用于进行JavaScript注入
WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jSString injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
[config.userContentController addUserScript:wkUScript];