iOS开发教程之WKWebView与JS的交互

概述iOS开发教程之WKWebView与JS的交互 前言 iOS8以后,Apple公司推出了WKWebView,对比之前的UIWebView不论是处理速度还是内存性能,都有了大幅度的提升! 那么下面我就分享一下WKWebView与JS的交互. 首先使用WKWebView.你需要导入WebKit #import 然后初始化一个WKWebView,设置代理,并且执行代理的方法.在网页加载成功的时候,我们会调用一些JS代码对网页进行设置. WKWebView的代理一共有三个:WKUIDelegate,WKNavigationDelegate,WKScr

前言

iOS8以后,Apple公司推出了WKWebVIEw,对比之前的UIWebVIEw不论是处理速度还是内存性能,都有了大幅度的提升!

那么下面我就分享一下WKWebVIEw与Js的交互.

首先使用WKWebVIEw.你需要导入WebKit #import

然后初始化一个WKWebVIEw,设置代理,并且执行代理的方法.在网页加载成功的时候,我们会调用一些Js代码对网页进行设置.

WKWebVIEw的代理一共有三个:WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler

1.WKWebVIEw调用Js方法

 /**   iOS调用Js里的navbuttonAction方法并传入两个参数   @param 'Xuanhe' 传入的参数   @param 25 传入的参数   @return completionHandler 回调   */ [self.webVIEw evaluateJavaScript:@"navbuttonAction('Xuanhe',18)" completionHandler:^(ID _Nullable response,NSError * _Nullable error) {   NSLog(@"response:%@,error:%@",response,error); }];

网页加载完成

//网页加载完成-(voID)webVIEw:(WKWebVIEw *)webVIEw dIDFinishNavigation:(WKNavigation *)navigation{  //设置Js  Nsstring *Js = @"document.getElementsByTagname('h1')[0].innerText";  //执行Js  [webVIEw evaluateJavaScript:Js completionHandler:^(ID _Nullable response,NSError * _Nullable error) {    NSLog(@"value: %@ error: %@",error);  }];}

通过以上 *** 作就成功获取到h1标签的文本内容了.如果报错,可以通过error进行相应的错误处理.

2.加载Js代码

创建WKWebVIEw,并在创建时向Js写入内容.

WKWebVIEwConfiguration *config = [[WKWebVIEwConfiguration alloc] init];WKWebVIEw *webVIEw = [[WKWebVIEw alloc] 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 = [[WKUserScript alloc] initWithSource:Js injectionTime:WKUserScriptInjectionTimeatdocumentEnd forMainFrameOnly:YES];[config.userContentController addUserScript:script];[self.vIEw addSubvIEw:webVIEw];

调用Js方法:

  [[webVIEw configuration].userContentController addScriptMessageHandler:self name:@"show"];

遵循代理WKScriptMessageHandler后,调用Js的方法show;

实现WKScriptMessageHandler代理方法,调用Js方法后的回调,可以获取到方法名,以及传递的数据:

//Js传递过来的数据-(voID)userContentController:(WKUserContentController *)userContentController dIDReceiveScriptMessage:(WKScriptMessage *)message{  NSLog(@"%@",message.name);//方法名  NSLog(@"%@",message.body);//传递的数据}

获取Jsd窗信息

遵循WKUIDelegate代理,实现相关代理方法:

// alert//此方法作为Js的alert方法接口的实现，默认d出窗口应该只有提示信息及一个确认按钮，当然可以添加更多按钮以及其他内容，但是并不会起到什么作用//点击确认按钮的相应事件需要执行completionHandler，这样Js才能继续执行////参数 message为 Js 方法 alert() 中的-(voID)webVIEw:(WKWebVIEw *)webVIEw runJavaScriptAlertPanelWithMessage:(Nsstring *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(voID (^)(voID))completionHandler{  UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"提示" message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];  [alertController addAction:([UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {    completionHandler();  }])];  [self presentVIEwController:alertController animated:YES completion:nil];}// confirm//作为Js中confirm接口的实现，需要有提示信息以及两个相应事件， 确认及取消，并且在completionHandler中回传相应结果，确认返回YES， 取消返回NO//参数 message为 Js 方法 confirm() 中的-(voID)webVIEw:(WKWebVIEw *)webVIEw runJavaScriptConfirmPanelWithMessage:(Nsstring *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(voID (^)(BOol))completionHandler{  UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"提示" message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];  [alertController addAction:([UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {    completionHandler(NO);  }])];  [alertController addAction:([UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {    completionHandler(YES);  }])];  [self presentVIEwController:alertController animated:YES completion:nil];}// prompt//作为Js中prompt接口的实现，默认需要有一个输入框一个按钮，点击确认按钮回传输入值//当然可以添加多个按钮以及多个输入框，不过completionHandler只有一个参数，如果有多个输入框，需要将多个输入框中的值通过某种方式拼接成一个字符串回传，Js接收到之后再做处理//参数 prompt 为 prompt(,);中的//参数defaultText 为 prompt(,);中的-(voID)webVIEw:(WKWebVIEw *)webVIEw runJavaScriptTextinputPanelWithPrompt:(Nsstring *)prompt defaultText:(Nsstring *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(voID (^)(Nsstring * _Nullable))completionHandler{  UIAlertController *alertController = [UIAlertController alertControllerWithTitle:prompt message:@"" preferredStyle:UIAlertControllerStyleAlert];  [alertController addTextFIElDWithConfigurationHandler:^(UITextFIEld * _Nonnull textFIEld) {    textFIEld.text = defaultText;  }];  [alertController addAction:([UIAlertAction actionWithTitle:@"完成" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {    completionHandler(alertController.textFIElds[0].text?:@"");  }])];  [self presentVIEwController:alertController animated:YES completion: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 = [[WKWebVIEw alloc]initWithFrame:CGRectMake(0,kScreenH-kNavbarH)];  webVIEw.navigationDelegate = self;  [webVIEw loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:url]]];  [self.vIEw addSubvIEw:webVIEw];  self.webVIEw = webVIEw;

加载完成后,通过注入Js方法,获取所有图片数据

- (voID)webVIEw:(WKWebVIEw *)webVIEw dIDFinishNavigation:(WKNavigation *)navigation {  [webVIEw xh_getimageUrlWithWebVIEw:webVIEw];}

注入的Js代码,是自己写在移动端的,可以根据需要自己修改,当前前提是你要回前端的代码.

- (NSArray *)xh_getimageUrlWithWebVIEw:(WKWebVIEw *)webVIEw{  //Js方法遍历图片添加点击事件返回图片个数  static Nsstring * const JsGetimages =  @"function getimages(){\  var obJs = document.getElementsByTagname(\"img\");\  var imgurlStr='';\  for(var i=0;i<obJs.length;i++){\  if(i==0){\  if(obJs[i].alt==''){\  imgurlStr=obJs[i].src;\  }\  }else{\  if(obJs[i].alt==''){\  imgurlStr+='#'+obJs[i].src;\  }\  }\  obJs[i].onclick=function(){\  if(this.alt==''){\  document.location=\"myweb:imageClick:\"+this.src;\  }\  };\  };\  return imgurlStr;\  };";  //用Js获取全部图片  [webVIEw evaluateJavaScript:JsGetimages completionHandler:nil];  Nsstring *Js2 = @"getimages()";  __block NSArray *array = [NSArray array];  [webVIEw evaluateJavaScript:Js2 completionHandler:^(ID Result,NSError * error) {    Nsstring *resurlt = [Nsstring stringWithFormat:@"%@",Result];    if([resurlt hasPrefix:@"#"]){      resurlt = [resurlt substringFromIndex:1];    }    array = [resurlt componentsSeparatedByString:@"#"];    [webVIEw setMethod:array];  }];  return array;}

在点击图片的时候,把返回的字符串分隔为数组,数组中每个数据都是一张图片地址.

再通过循环方法找到点击的是第几张图片.

- (voID)webVIEw:(WKWebVIEw *)webVIEw decIDePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(voID (^)(WKNavigationActionPolicy))decisionHandler {  [self showBigImage:navigationAction.request];  decisionHandler(WKNavigationActionPolicyAllow);}- (voID)showBigImage:(NSURLRequest *)request {  Nsstring *str = request.URL.absoluteString;  if ([str hasPrefix:@"myweb:imageClick:"]) {    Nsstring *imageUrl = [str substringFromIndex:@"myweb:imageClick:".length];    NSArray *imgurlArr = [self.webVIEw getimgurlArray];    NSInteger index = 0;    for (NSInteger i = 0; i < [imgurlArr count]; i++) {      if([imageUrl isEqualToString:imgurlArr[i]]){        index = i;        break;      }    }    NSLog(@"im");  }}

拿到点击的图片,也就是当前图片,也拿到所有的图片数组,就可以进行图片预览了.

UIWebVIEw的点击图片方法和WKWebVIEw方法类似,只不过是,注入的Js的代码,略微不同,返回的数组中最后一个数据就是当前图片.

demo地址

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

总结

以上是内存溢出为你收集整理的iOS开发教程之WKWebView与JS的交互全部内容，希望文章能够帮你解决iOS开发教程之WKWebView与JS的交互所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。