IOS中UIWebView、WKWebView之JS交互

所属分类: 软件编程 / IOS 阅读数: 1018
收藏 0 赞 0 分享

做客户端开发,肯定避免不了JS交互,于是自己对苹果接口做了个简易封装:

JSExport-->UIWebView+Interaction、WKScriptMessageHandler -->WKWebView+Interaction以备以后使用。

代码非常简洁,见这里:https://github.com/V5zhou/JSInteraction.git

旧方式

旧的交互方式有通过UIWebViewDelegate实现的:JS与客户端定义好跳转页面参数,在将要跳转时捕获关键字,然后处理业务。

iOS端:

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
  NSString *urlString = [[request URL] absoluteString];
  if ([urlString isEqualToString:@"objc://loading"]) {
    if (_gotoRootViewController) {
      _gotoRootViewController();
    }
  }
  return YES;
}

JS端:

<!DOCTYPE html>
<html>
  <title>test</title>
  <meta charset="utf-8">
    <body>
      <a href="javascript:document.location = 'objc://loading'" rel="external nofollow" class="btn">这是交互按钮</a>
    </body>
</html>

UIWebView+JSExport方式

导入JavaScriptCore.framework,并导入我的扩展类#import "UIWebView+Interaction.h"。

使用方式

OC调JS:

[_webView InterActionToJs:@"alertMobile('15625298071')"];

JS调OC:

- (void)webViewDidFinishLoad:(UIWebView *)webView {
  [self.webView InterActionToOc:^(InterActionOcType functionType, NSDictionary *param) {
    switch (functionType) {
      case InterActionOcType_alert:
      {
        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:param[@"title"] message:param[@"content"] delegate:nil cancelButtonTitle:nil otherButtonTitles:@"确定", nil];
        [alert show];
      }
        break;
      case InterActionOcType_present:
      {
        self.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
        Class Cls = NSClassFromString(param[@"toController"]);
        BOOL isAnimate = [param[@"animate"] boolValue];
        UIViewController *ctl = [[Cls alloc] init];
        [self presentViewController:ctl animated:isAnimate completion:nil];
      }
        break;

      default:
        break;
    }
  }];
}

添加动作

//自定义添加功能类型
typedef NS_ENUM(NSUInteger, InterActionOcType) {
  InterActionOcType_alert = 0,
  InterActionOcType_present,
  InterActionOcType_xxxxxxx,   //有啥需求就和这里添加
};

并且对应的html中添加JS,参数封装为字典形式。例:

function myPresent(ctl) {
      var param = new Array();
      param["animate"] = 1;
      param["toController"] = "SecondViewController";
      WebViewInteraction.callBack(1, param);
    }

其中callBack是通过这个JSExport实现的

@protocol WebViewJSExport <JSExport>
JSExportAs
(callBack /** callBack 作为js方法的别名 */,
 - (void)awakeOC:(InterActionOcType)type param:(NSDictionary *)param
 );
@end

WKWebView+WKScriptMessageHandler方式

导入WebKit.framework,并导入我的扩展类#import "WKWebView+Interaction.h"。

使用方式

OC调JS:

[self.wkWebView InterActionToJs:@"JSReloadTitle('你点了刷新JS按钮,我没猜错!')"];

JS调OC:

//注册交互类型
  [self.wkWebView registerScriptTypes:@{@"OCDismiss" : @(WKInterActionOcType_dismiss),
                     @"OCShowAlert" : @(WKInterActionOcType_alert)}];

  [self.wkWebView InterActionToOc:^(WKInterActionOcType functionType, NSDictionary *param) {
    switch (functionType) {
      case WKInterActionOcType_dismiss:
      {
        BOOL isAnimate = [param[@"animate"] boolValue];
        [self dismissViewControllerAnimated:isAnimate completion:nil];
      }
        break;
      case WKInterActionOcType_alert:
      {
        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"JS去做平方" message:nil delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil];
        alert.alertViewStyle = UIAlertViewStylePlainTextInput;
        [alert show];
      }
        break;
      default:
        break;
    }
  }];

添加动作

//自定义添加功能类型
typedef NS_ENUM(NSUInteger, WKInterActionOcType) {
  WKInterActionOcType_alert = 0,
  WKInterActionOcType_dismiss,
  WKInterActionOcType_xxxxxxx,   //有啥需求就和这里添加
};

并且对应的html中添加JS,参数封装为字典形式。例:

//js调oc
function myDismiss() {
  window.webkit.messageHandlers.OCDismiss.postMessage({"animate" : 1});  //这里的OCDismiss对应注册类型
}

其中callBack是通过WKScriptMessageHandler实现的

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
  dispatch_async(dispatch_get_main_queue(), ^{
    NSString *name = message.name;
    NSDictionary *value = message.body;
    WKInterActionOcType type = [self.typeDict[name] integerValue];
    if (self.block) {
      self.block(type, value);
    }
  });
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

详细整理iOS中UITableView的性能优化

最近在微博上看到一个很好的开源项目,是关于如何优化UITableView的,加上正好最近也在优化项目中的类似朋友圈功能这块,思考了很多关于UITableView的优化技巧,所以决定详细的整理下对优化UITableView的理解,需要的朋友们可以参考借鉴。
收藏 0 赞 0 分享

IOS开发中禁止NavigationController的向右滑动返回

这篇文章主要介绍了IOS开发中禁止NavigationController的向右滑动返回的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

iOS实现微信/QQ显示最近拍摄图片的功能实例代码

如果你刚刚拍摄了图片,在使用微信/QQ发生消息时会显示“你可能要发送的图片”,这个功能非常人性化,怎么实现的呢?下面小编给大家分享iOS实现微信/QQ显示最近拍摄图片的功能实例代码,一起看看吧
收藏 0 赞 0 分享

iOS实现动态自适应标签

这篇文章主要为大家详细介绍了iOS动态自适应标签的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

iOS实现图片存在本地、再从本地获取图片的功能

本文主要介绍了iOS实现图片存在本地、再从本地获取图片的功能的代码。具有很好的参考价值。下面跟着小编一起来看下吧
收藏 0 赞 0 分享

iOS视频录制(或选择)压缩及上传功能(整理)

最新做的一个功能涉及到了视频的录制、压缩及上传功能,经过大神的一番教导,终于倒腾清楚了,今天小编把问题经过记录一下分享到脚本之家平台,供大家参考
收藏 0 赞 0 分享

iOS中打包上传常见的错误与解决办法

关于打包上传至AppStore,大家都认为是最后一步了,其实到了这里往往会遇到很多的坑。对于踩过的坑我不想再踩第二遍,所以在此将我遇到的所有奇葩问题在此做一个记录,当作对自己的一个提醒,同时也分享给给位,需要的朋友可以参考下。
收藏 0 赞 0 分享

解决Xcode 8构建版本iTunes Connect获取不到应用程序状态的办法

这篇文章主要介绍了关于解决Xcode 8构建版本iTunes Connect获取不到应用程序状态的办法,需要的朋友可以参考下
收藏 0 赞 0 分享

Objective-C实现身份证验证的方法示例

这篇文章主要给大家分享了Objective-C实现身份证验证的方法,文中给出了详细的示例代码,对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
收藏 0 赞 0 分享

ios启动页强制竖屏(进入App后允许横屏与竖屏)

最近工作遇到这样一个需要,当进入启动页需要强制竖屏,而进入APP后就允许横屏与竖屏,通过查找相关的资料找到了解决的方法,所以将实现的方法整理后分享出来,需要的朋友们可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享
查看更多