服务器之家

服务器之家 > 正文

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

时间:2021-05-26 15:44     来源/作者:iOS_xuanhe

前言

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

那么下面我就分享一下wkwebview与js的交互.

首先使用wkwebview.你需要导入webkit #import

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

wkwebview的代理一共有三个:wkuidelegate,wknavigationdelegate,wkscriptmessagehandler

1.wkwebview调用js方法

?
1
2
3
4
5
6
7
8
9
10
/**
  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);
}];

网页加载完成

?
1
2
3
4
5
6
7
8
9
10
//网页加载完成
-(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: %@", response, error);
 
  }];
}

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

2.加载js代码

创建wkwebview,并在创建时向js写入内容.

?
1
2
3
4
5
6
7
8
9
10
11
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方法:

?
1
[[webview configuration].usercontentcontroller addscriptmessagehandler:self name:@"show"];

遵循代理wkscriptmessagehandler后,调用js的方法show;

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

?
1
2
3
4
5
6
//js传递过来的数据
-(void)usercontentcontroller:(wkusercontentcontroller *)usercontentcontroller didreceivescriptmessage:(wkscriptmessage *)message
{
  nslog(@"%@",message.name);//方法名
  nslog(@"%@",message.body);//传递的数据
}

获取js弹窗信息

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// alert
//此方法作为js的alert方法接口的实现,默认弹出窗口应该只有提示信息及一个确认按钮,当然可以添加更多按钮以及其他内容,但是并不会起到什么作用
//点击确认按钮的相应事件需要执行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:

?
1
2
3
4
5
6
nsstring *url = @"http://tapi.mukr.com/mapi/wphtml/index.php?ctl=app&act=news_detail&id=vgptsdhkemfvb3y4y3jxtfdrr2j4ut09";
 wkwebview *webview = [[wkwebview alloc]initwithframe:cgrectmake(0, knavbarh, kscreenw, kscreenh-knavbarh)];
 webview.navigationdelegate = self;
 [webview loadrequest:[nsurlrequest requestwithurl:[nsurl urlwithstring:url]]];
 [self.view addsubview:webview];
 self.webview = webview;

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

?
1
2
3
- (void)webview:(wkwebview *)webview didfinishnavigation:(wknavigation *)navigation {
  [webview xh_getimageurlwithwebview:webview];
}

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
- (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; 
}

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
- (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地址

总结

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

原文链接:http://www.cocoachina.com/articles/27105

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021德云社封箱演出完整版 2021年德云社封箱演出在线看
2021德云社封箱演出完整版 2021年德云社封箱演出在线看 2021-03-15
返回顶部