iOS开发教程之WKWebView与JS的交互
前言
iOS8以后,Apple公司推出了WKWebView,对比之前的UIWebView不论是处理速度还是内存性能,都有了大幅度的提升!
那么下面我就分享一下WKWebView与JS的交互.
首先使用WKWebView.你需要导入WebKit#import
然后初始化一个WKWebView,设置代理,并且执行代理的方法.在网页加载成功的时候,我们会调用一些JS代码对网页进行设置.
WKWebView的代理一共有三个:WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler
1.WKWebView调用JS方法
/**
iOS调用js里的navButtonAction方法并传入两个参数
@param'Xuanhe'传入的参数
@param25传入的参数
@returncompletionHandler回调
*/
[self.webViewevaluateJavaScript:@"navButtonAction('Xuanhe',18)"completionHandler:^(id_Nullableresponse,NSError*_Nullableerror){
NSLog(@"response:%@,error:%@",response,error);
}];
网页加载完成
//网页加载完成
-(void)webView:(WKWebView*)webViewdidFinishNavigation:(WKNavigation*)navigation{
//设置JS
NSString*js=@"document.getElementsByTagName('h1')[0].innerText";
//执行JS
[webViewevaluateJavaScript:jscompletionHandler:^(id_Nullableresponse,NSError*_Nullableerror){
NSLog(@"value:%@error:%@",response,error);
}];
}
通过以上操作就成功获取到h1标签的文本内容了.如果报错,可以通过error进行相应的错误处理.
2.加载JS代码
创建WKWebView,并在创建时向JS写入内容.
WKWebViewConfiguration*config=[[WKWebViewConfigurationalloc]init];
WKWebView*webView=[[WKWebViewalloc]initWithFrame:CGRectMake(0,kNavBarH,kScreenW,kScreenH-kNavBarH)configuration:config];
webView.navigationDelegate=self;
webView.UIDelegate=self;
//获取HTML上下文的第一个h2标签,并写入内容
NSString*js=@"document.getElementsByTagName('h2')[0].innerText='这是一个iOS写入的方法'";
WKUserScript*script=[[WKUserScriptalloc]initWithSource:jsinjectionTime:WKUserScriptInjectionTimeAtDocumentEndforMainFrameOnly:YES];
[config.userContentControlleraddUserScript:script];
[self.viewaddSubview:webView];
调用JS方法:
[[webViewconfiguration].userContentControlleraddScriptMessageHandler:selfname:@"show"];
遵循代理WKScriptMessageHandler后,调用JS的方法show;
实现WKScriptMessageHandler代理方法,调用JS方法后的回调,可以获取到方法名,以及传递的数据:
//js传递过来的数据
-(void)userContentController:(WKUserContentController*)userContentControllerdidReceiveScriptMessage:(WKScriptMessage*)message
{
NSLog(@"%@",message.name);//方法名
NSLog(@"%@",message.body);//传递的数据
}
获取JS弹窗信息
遵循WKUIDelegate代理,实现相关代理方法:
//alert
//此方法作为js的alert方法接口的实现，默认弹出窗口应该只有提示信息及一个确认按钮，当然可以添加更多按钮以及其他内容，但是并不会起到什么作用
//点击确认按钮的相应事件需要执行completionHandler，这样js才能继续执行
////参数message为js方法alert()中的-(void)webView:(WKWebView*)webViewrunJavaScriptAlertPanelWithMessage:(NSString*)messageinitiatedByFrame:(WKFrameInfo*)framecompletionHandler:(void(^)(void))completionHandler{
UIAlertController*alertController=[UIAlertControlleralertControllerWithTitle:@"提示"message:message?:@""preferredStyle:UIAlertControllerStyleAlert];
[alertControlleraddAction:([UIAlertActionactionWithTitle:@"确认"style:UIAlertActionStyleDefaulthandler:^(UIAlertAction*_Nonnullaction){
completionHandler();
}])];
[selfpresentViewController:alertControlleranimated:YEScompletion:nil];
}
//confirm
//作为js中confirm接口的实现，需要有提示信息以及两个相应事件，确认及取消，并且在completionHandler中回传相应结果，确认返回YES，取消返回NO
//参数message为js方法confirm()中的-(void)webView:(WKWebView*)webViewrunJavaScriptConfirmPanelWithMessage:(NSString*)messageinitiatedByFrame:(WKFrameInfo*)framecompletionHandler:(void(^)(BOOL))completionHandler{
UIAlertController*alertController=[UIAlertControlleralertControllerWithTitle:@"提示"message:message?:@""preferredStyle:UIAlertControllerStyleAlert];
[alertControlleraddAction:([UIAlertActionactionWithTitle:@"取消"style:UIAlertActionStyleCancelhandler:^(UIAlertAction*_Nonnullaction){
completionHandler(NO);
}])];
[alertControlleraddAction:([UIAlertActionactionWithTitle:@"确认"style:UIAlertActionStyleDefaulthandler:^(UIAlertAction*_Nonnullaction){
completionHandler(YES);
}])];
[selfpresentViewController:alertControlleranimated:YEScompletion:nil];
}
//prompt
//作为js中prompt接口的实现，默认需要有一个输入框一个按钮，点击确认按钮回传输入值
//当然可以添加多个按钮以及多个输入框，不过completionHandler只有一个参数，如果有多个输入框，需要将多个输入框中的值通过某种方式拼接成一个字符串回传，js接收到之后再做处理
//参数prompt为prompt(,);中的//参数defaultText为prompt(,);中的-(void)webView:(WKWebView*)webViewrunJavaScriptTextInputPanelWithPrompt:(NSString*)promptdefaultText:(NSString*)defaultTextinitiatedByFrame:(WKFrameInfo*)framecompletionHandler:(void(^)(NSString*_Nullable))completionHandler{
UIAlertController*alertController=[UIAlertControlleralertControllerWithTitle:promptmessage:@""preferredStyle:UIAlertControllerStyleAlert];
[alertControlleraddTextFieldWithConfigurationHandler:^(UITextField*_NonnulltextField){
textField.text=defaultText;
}];
[alertControlleraddAction:([UIAlertActionactionWithTitle:@"完成"style:UIAlertActionStyleDefaulthandler:^(UIAlertAction*_Nonnullaction){
completionHandler(alertController.textFields[0].text?:@"");
}])];
[selfpresentViewController:alertControlleranimated:YEScompletion:nil];
}
demo地址
还有一些其他的跳转代理,我将新开文章来解释.
其他拓展:Webview点击图片查看大图
大家都知道，WKWebview里面并没有查看网页大图的属性或者方法的，所以只能通过js与之交互来实现这一功能.基本原理是:通过JS获取页面所有的图片,把这些图片村到数组中,给图片添加点击事件,通过下标显示大图即可.
首先创建WKWebView:
NSString*url=@"http://tapi.mukr.com/mapi/wphtml/index.php?ctl=app&act=news_detail&id=VGpTSDhkemFVb3Y4Y3JXTFdRR2J4UT09"; WKWebView*webView=[[WKWebViewalloc]initWithFrame:CGRectMake(0,kNavBarH,kScreenW,kScreenH-kNavBarH)]; webView.navigationDelegate=self; [webViewloadRequest:[NSURLRequestrequestWithURL:[NSURLURLWithString:url]]]; [self.viewaddSubview:webView]; self.webView=webView;
加载完成后,通过注入JS方法,获取所有图片数据
-(void)webView:(WKWebView*)webViewdidFinishNavigation:(WKNavigation*)navigation{
[webViewxh_getImageUrlWithWebView:webView];
}
注入的JS代码,是自己写在移动端的,可以根据需要自己修改,当前前提是你要回前端的代码.
-(NSArray*)xh_getImageUrlWithWebView:(WKWebView*)webView{
//js方法遍历图片添加点击事件返回图片个数
staticNSString*constjsGetImages=
@"functiongetImages(){\
varobjs=document.getElementsByTagName(\"img\");\
varimgUrlStr='';\
for(vari=0;i
在点击图片的时候,把返回的字符串分隔为数组,数组中每个数据都是一张图片地址.
再通过循环方法找到点击的是第几张图片.
-(void)webView:(WKWebView*)webViewdecidePolicyForNavigationAction:(WKNavigationAction*)navigationActiondecisionHandler:(void(^)(WKNavigationActionPolicy))decisionHandler{
[selfshowBigImage:navigationAction.request];
decisionHandler(WKNavigationActionPolicyAllow);
}
-(void)showBigImage:(NSURLRequest*)request{
NSString*str=request.URL.absoluteString;
if([strhasPrefix:@"myweb:imageClick:"]){
NSString*imageUrl=[strsubstringFromIndex:@"myweb:imageClick:".length];
NSArray*imgUrlArr=[self.webViewgetImgUrlArray];
NSIntegerindex=0;
for(NSIntegeri=0;i<[imgUrlArrcount];i++){
if([imageUrlisEqualToString:imgUrlArr[i]]){
index=i;
break;
}
}
NSLog(@"im");
}
}
拿到点击的图片,也就是当前图片,也拿到所有的图片数组,就可以进行图片预览了.
UIWebView的点击图片方法和WKWebView方法类似,只不过是,注入的JS的代码,略微不同,返回的数组中最后一个数据就是当前图片.
demo地址
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对毛票票的支持。