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' 传入的参数
   @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: %@", response, 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);//传递的数据
}

获取JS弹窗信息

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

// 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:

 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方法,获取所有图片数据

- (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地址

总结

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

(0)

相关推荐

  • JS交互点击WKWebView中的图片实现预览效果

    Swift 4.0 WKWebView 1.注入js代码 (重点) func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { let jsGetImages = "function getImages(){" + "var objs = document.getElementsByTagName(\"img\");" + "var imgScr =

  • IOS中UIWebView、WKWebView之JS交互

    做客户端开发,肯定避免不了JS交互,于是自己对苹果接口做了个简易封装: JSExport-->UIWebView+Interaction.WKScriptMessageHandler -->WKWebView+Interaction以备以后使用. 代码非常简洁,见这里:https://github.com/V5zhou/JSInteraction.git 旧方式 旧的交互方式有通过UIWebViewDelegate实现的:JS与客户端定义好跳转页面参数,在将要跳转时捕获关键字,然后处理业务.

  • ios下OC与JS交互之WKWebView

    上一篇文章我们使用了JavaScriptCore框架重写了之前的示例,iOS8苹果偏爱HTML5,重构了UIWebVIew,给我们带来了WKWebView,使其性能.稳定性.功能大幅度提升,也更好的支持了HTML5的新特性.这篇文章就们就拿WKWebView来小试牛刀 一.WKWebView Framework WKWebView的14个类与3个协议: WKBackForwardList: 之前访问过的 web 页面的列表,可以通过后退和前进动作来访问到. WKBackForwardListIt

  • iOS和JS交互教程之WKWebView-协议拦截详解

    前言 由于Xcode8发布之后,编译器开始不支持iOS 7了,这样我们的app也改为最低支持iOS 8.0,既然需要与web交互,那自然也就选择使用了 iOS 8.0之后 才推出的新控件 WKWebView. 相比与 UIWebView, WKWebView 存在很多优势: 支持更多的HTML5的特性 高达60fps滚动刷新频率与内置手势 与Safari相容的JavaScript引擎 在性能.稳定性方面有很大提升占用内存更少 协议方法及功能都更细致 可获取加载进度等. 先解释下标题:"iOS与J

  • WKWebView、WebView和JS的交互方式详解

    由于Xcode8发布之后,编译器开始不支持iOS 7了,这样我们的app也改为最低支持iOS 8.0,既然需要与web交互,那自然也就选择使用了 iOS 8.0之后 才推出的新控件 WKWebView. 相比与 UIWebView, WKWebView 存在很多优势: 支持更多的HTML5的特性 高达60fps滚动刷新频率与内置手势 与Safari相容的JavaScript引擎 在性能.稳定性方面有很大提升占用内存更少 协议方法及功能都更细致 可获取加载进度等. UIWebView与JS的交互方

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

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

  • iOS开发教程之UIView和UIViewController的生命周期详解

    前言 iOS开发中,创建View常见的两种方式一个是纯代码,一个是借助于XIB:创建ViewController常见的也有两种方式一个是纯代码,一个是借助于StoryBoard. 通过交流我发现很多童鞋对这些概念都很模糊,于是通过实验写一篇博客供参考. 重写View的如下方法 @implementation YFView -(instancetype)init{ self = [super init]; NSLog(@"%s", __func__); return self; } -(

  • iOS开发教程之APP内部切换语言的实现方法

    前言 相信大家在iOS开发中都遇到了一个问题,随着APP越来越完善,很多APP都做了国际化,也实现了APP内部切换语言.那么如何实现的呢?下面来一起看看详细的介绍吧 原理 国际化都会走到NSBundle的- (NSString *)localizedStringForKey:(NSString *)key value:(nullable NSString *)value table:(nullable NSString *)tableName方法,使用自定义Bundle替换NSBundle,通过

  • iOS开发教程之XLForm的基本使用方法

    前言 在iOS开发中,开发"表单"界面,字段稍微多一点的一般都用UITableView来做,而XLForm就是这样一个框架,它是创建动态表格视图最牛逼的iOS库, 用它实现表单功能,非常简单,省心省力.但是很可惜,搜索了很多文章都只是翻译官方文档,很多人在使用该库的时候可能都被官方文档带走远了,不知道如何具体使用.正好最近也要用到这个库,所以写个入门使用文章供大家参考. 以下是这个库一个简单的结构图: 一. 导入项目 使用CocoaPods或者手动导入库文件,本人选择直接导入项目源文件

  • iOS开发教程之UIRefreshControl使用的踩坑指南

    iOS UIRefreshControl基本用法 - (void) loadRefreshView { // 下拉刷新 _refreshControl = [[UIRefreshControl alloc] init]; _refreshControl.attributedTitle = [[NSAttributedString alloc] initWithString:@"下拉刷新"]; [_refreshControl addTarget:self action:@selecto

  • iOS开发教程之Status Bar状态栏设置的方法汇总

    前言 我们在很多app中可以看到不同与导航栏的状态栏的颜色,比如下面: 状态栏 个人觉得 iOS 的 Status Bar 状态栏也是一个比较坑的地方,所以还是写一个总结,有遇到这方面问题的朋友可以看一下. 下面话不多说了,来随着小编一起学习学习吧 Status Bar 状态栏的隐藏 1. 通过设置 Info.plist 文件实现状态栏的全局隐藏 在 Info.plist 文件中添加 Status bar is initially hidden 设置为 YES ,这个是隐藏 App 在 Lunc

  • IOS开发教程之put上传文件的服务器的配置及实例分享

    1,HTTP常见的方法 GET 获取指定资源 POST 2M 向指定资源提交数据进行处理请求,在RESTful风格中用于新增资源 HEAD 获取指定资源头部信息PUT 替换指定资源(不支持浏览器操作)DELETE 删除指定资源 2,配置服务器的put请求方式: 复制代码 代码如下: 1> n 打开终端p cd /etc/apache2p sudo vim httpd.conf n 在vim中输入p /httpd-dav.conf• 查找httpd-dav.confp 按0将光标移动至行首 p 按

  • Android开发教程之shape和selector的结合使用

    shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和selector在美化控件中的作用是至关重要的. 1.Shape 简介 作用:XML中定义的几何形状 位置:res/drawable/文件的名称.xml 使用的方法: Java代码中:R.drawable.文件的名称 XML中:android:background="@drawable/文件的名称&

  • PHP7扩展开发教程之Hello World实现方法示例

    本文实例讲述了PHP7扩展开发教程之Hello World实现方法.分享给大家供大家参考,具体如下: 一.下载PHP源代码 要开发PHP扩展,需要先下载PHP的源代码,一方面是因为我们的扩展一般会用到PHP自身定义的函数和宏,另一方面我们可以利用官方提供的工具减少工作量. 我下载了PHP-7.0.2,地址是:http://cn2.php.net/get/php-7.0.2.tar.gz. 解压源码压缩包, tar xzf php-7.0.2.tar.gz,我们现在只需要关注Zend和ext这两个

  • C#开发教程之ftp操作方法整理

    1.最近项目开发涉及到ftp操作.发现FtpWebRequest类有些操作很麻烦, 例如创建目录只能创建一级目录,多级就失败.删除目录只能删除最后一级的空目录.同样下载也是. 故写下帮助类方便使用. 2.调用方法展示, var ftp = new FtpHelper("111.111.111.111", "xxxxxxx", "xxxxxx");//初始化ftp,创建ftp对象 ftp.uploadFile("F:\\wms.zip&q

随机推荐