神刀安全网

iOS webView 与 JS 的交互

  iOS 的webView分为两类, 一类是 UIKit框架下的 UIWebView , 另一类是 WebKit框架下的 WKWebView. UIWebView 与JS 的交互是依赖于JavaScriptCore(iOS7.0),而WKWebView则是iOS8.0发布的.so 如果项目不需要兼容iOS8.0以下的版本则使用WKWebView即可.本文将介绍UIWebView WKWebView 与JS的交互.

一.UIWebView

  对于UIWebView大家都不陌生,网页或富文本加载都能用到,这里对于UIWebView基本的用法就不进行介绍了.UIWebView与JS的交互方面主要是依赖于JavaScriptCore类库,下面简单的介绍下这个类库.

<JavaScriptCore/JavaScriptCore.h> Command+左键 进入

iOS webView 与 JS 的交互
JavaScriptCore的类和协议.png

  1. JSContext       为JavaScript提供运行环境
  2. JSValue         是JavaScript和Object-C之间互换的桥梁
  3. JSManagedValue    为开发人员提供对象内存管理
  4. JSVirtualMachine    为JavaScript的运行提供了底层资源
  5. JSExport        作为JavaScript和Objective-C两种语言的互通协议。
  在UIWebView中,native与JS的交互其实就是通过拦截request的方式实现的. 主要有两种方法, 协议 和 Blcok.
协议(JSExport)

  JSExport中没有约定任何的方法,连可选的(@optional)都没有,但是所有继承了该协议(@protocol)的协议(注意不是Objective-C的类(@interface))中定义的方法,都可以在JSContext中被使用。JSExport协议详细讲解

Native中的代码

/**  *  制定协议(遵循 JSExport协议)  */  @protocol JSObjcProtocol <JSExport>  /**  *  商品详情页面返回按钮  */ - (void)goBack;  /**  *  购物车界面编辑按钮  */ - (void)edit;  /**  *  支付订单界面确认支付按钮 以及三种传值方式  */ //javascript:App.pay(payInfo); - (void)pay:(NSString *)payInfo;  //App.payInfoUserIDWithUserName("用户ID","用户名字"); - (void)payInfoUserID:(NSString *)userid withUserName:(NSString *)userName;  //App.payInfoOrder("订单号","支付方式"); JSExportAs(payInfoOrder, - (void)payInfoOrder:(NSString *)order withPayType:(NSString *)type);  @nd
//控制器遵守协议之后, 协议中的方法都需要实现. @interface UIWebViewController ()<UIWebViewDelegate,JSObjcProtocol> @property (strong, nonatomic) IBOutlet UIWebView *webView; //为JavaScript提供运行环境 @property (strong ,nonatomic) JSContext *jsContext; @end
- (void)webViewDidFinishLoad:(UIWebView *)webView{     //获取当前加载完成网页的上下文环境     self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];     //将设置的标识符注入 由控制器接收     self.jsContext[@"App"] = self;     //异常处理     self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {         context.exception = exceptionValue;         NSLog(@"异常信息:%@", exceptionValue);     }; }

这里解释下 self.jsContext[@”App”] = self;
对应JS中的代码

<body class="by"> <div class="ftop">  <a class="back" onClick="javascript:history.back(-1);">返回</a>     <h2>购物车</h2>     <a class="showde">编辑</a> </div> <script>  $(function(){       $(".showde").click(function(){          App.edit();        })  }) </script> </body>

  这是UIWebView与JS交互的关键所在, JavaScriptCore框架会通过class_copyProtocolList方法找到类所遵循的协议,然后再对每个协议通过protocol_copyProtocolList检查它是否遵循JSExport协议进而将方法反映到JavaScript之中。直白的说就是 调用本地方法之后从协议中取出相对应的方法在JavaScript中调用.

  关于异常处理:在JSContext中执行的JavaScript如果出现异常,只会被JSContext捕获并存储在exception属性上,而不会向外抛出。时时刻刻检查JSContext对象的exception是否不为nil显然是不合适,更合理的方式是给JSContext对象设置exceptionHandler,它接受的是^(JSContext context, JSValue exceptionValue)形式的Block。其默认值就是将传入的exceptionValue赋给传入的context的exception属性.
iOS7新JavaScriptCore框架入门介绍

Block

  可以从一定程度上解决JSContext引用环境变量与控制器self的循环引用问题
Native中的代码

- (void)webViewDidFinishLoad:(UIWebView *)webView{     //获取网页上下文环境     self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];      __weak typeof(self)  weakSelf = self;     //Block可以传入JSContext中当做JavaScript的方法使用     self.context[@"goBack"] = ^() {         NSLog(@"点击返回按钮");         dispatch_async(dispatch_get_main_queue(), ^{             [weakSelf.navigationController popViewControllerAnimated:YES];         });     };      self.context[@"goShopping"] = ^() {         NSLog(@"点击购物车按钮");         //获取参数列表         NSArray *args = [JSContext currentArguments];         for (JSValue *jsVal in args) {             NSLog(@"%@", jsVal);         }         //获取当前调用该方法的对象         JSValue *this = [JSContext currentThis];         NSLog(@"this: %@",this);          [weakSelf goTo];     }; }  - (void)goTo{     //将参数传进去来调用JS的方法     [self.context evaluateScript:@"go('商品3')"]; }

JS中的代码

<body> <div class="ftop">  <a class="back" onclick="goBack()">返回</a>     <h2>商品详情</h2>     <a class="comea" onclick="goShopping(['商品1','商品2'])">购物车</a> </div>  <script>     function go(info){         alert(info);     } </script> </body>

二.WKWebView

  适配iOS8.0,相较于UIWebView,性能功能方面都有了很大的提升,如果项目不需要适配iOS7的话可以直接使用WKWebView.
简单介绍一下代理协议:

  1. WKNavigationDelegate: UIWebViewDelegate的功能都有,而且添加了页面导航和网页加载进度的监听
  2. WKUIDelegate: 监听JS方法中的alert、confirm、prompt
  3. WKScriptMessageHandler: JS交互相关
@interface WKWebViewController ()<WKNavigationDelegate,WKUIDelegate,WKScriptMessageHandler> @property (strong ,nonatomic) WKWebView *webView; @end
- (void)viewDidLoad {     [super viewDidLoad];      //初始化     //_webView = [[WKWebView alloc]initWithFrame:self.view.bounds];      //带有设置选项的初始化     WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc]init];     _webView = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:configuration];      //设置代理     _webView.navigationDelegate = self;     _webView.UIDelegate = self;      //加载本地的HTML     NSURL *url = [[NSBundle mainBundle] URLForResource:@"shopsDetail_WKWebView" withExtension:@"html"];     [_webView loadRequest:[NSURLRequest requestWithURL:url]];      [self.view addSubview:_webView];      //添加一个名称,可以在JS中通过这个名称发送消息     [[_webView configuration].userContentController addScriptMessageHandler:self name:@"goBackApp"];     [[_webView configuration].userContentController addScriptMessageHandler:self name:@"goShoppingApp"]; }
/**  *  WKScriptMessageHandler协议中必须要实现的方法     用来接收JS端通过window.webkit.messageHandlers.{Name}.postMessage()方法发送的消息并做相应处理  */ - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {     NSLog(@"方法名 %@,传回参数 %@",message.name,message.body);      //根据方法名来区分     if ([message.name isEqual:@"goBackApp"]) {         [self.navigationController popViewControllerAnimated:YES];      }else if ([message.name isEqual:@"goShoppingApp"]){         //调用JS中的方法并将参数传递到JS中         [self.webView evaluateJavaScript:@"altertFromOC('商品1,商品2')" completionHandler:nil];     } }

JS中代码

<body> <div class="ftop">  <a class="back" onclick="goBack()">返回</a>     <h2>商品详情</h2>     <a onclick = "goShopping()">购物车</a> </div>  <script>     //接收Native发来的消息     function altertFromOC(shops){         alert(shops);     }      function goBack() {         将goBackApp发送Native         window.webkit.messageHandlers.goBackApp.postMessage(null);     }      function goShopping(){          将goBackApp发送Native中,并携带参数{shopsName:'商品名',shopsID:'商品ID'}          window.webkit.messageHandlers.goShoppingApp.postMessage({shopsName:'商品名',shopsID:'商品ID'})     } </script> </body>

在WKWebView中,网页自身的alert、confirm、prompt等方法是被拦截的,不论是否有WKUIDelegate.为了能将传递至JS的参数显示出来,这里调用WKUIDelegate的代理方法.

/**  *  WKUIDelegate 代理方法     用来监听webView中的alert方法  *  */ - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {     //调用原生的alert方法     UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提醒" message:message preferredStyle:UIAlertControllerStyleAlert];     [alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {         completionHandler();     }]];     [self presentViewController:alert animated:YES completion:NULL]; }  //用来监听webView中的confirm方法 //- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;  //用来监听webView中的prompt方法 //- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler;

Ok,交互方面大致就这些内容,关于WKWebView的代理方法还有很多,用起来也很方便,这里就没有写了,毕竟主题是关于交互的.
代码在这里

References:

  1. http://www.cocoachina.com/ios/20140415/8167.html
  2. http://blog.iderzheng.com/introduction-to-ios7-javascriptcore-framework/
  3. http://mp.weixin.qq.com/s__biz=MzIzMzA4NjA5Mw==&mid=400327803&idx=1&sn=2a09fa94dd605a9f03bbc16f998e5717#rd
  4. http://www.jianshu.com/p/f896d73c670a

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » iOS webView 与 JS 的交互

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址