iOS webView 与 JS 的交互

作者: TotoroLee | 来源:发表于2016-08-29 21:12 被阅读870次

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+左键进入

JavaScriptCore的类和协议.png

JSContext 为JavaScript提供运行环境
JSValue 是JavaScript和Object-C之间互换的桥梁
JSManagedValue 为开发人员提供对象内存管理
JSVirtualMachine 为JavaScript的运行提供了底层资源
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.
简单介绍一下代理协议:

WKNavigationDelegate: UIWebViewDelegate的功能都有,而且添加了页面导航和网页加载进度的监听
WKUIDelegate: 监听JS方法中的alert、confirm、prompt
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:

网友评论

本文标题：iOS webView 与 JS 的交互

本文链接：https://www.haomeiwen.com/subject/bdhtettx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

iOS webView 与 JS 的交互

一.UIWebView

在UIWebView中,native与JS的交互其实就是通过拦截request的方式实现的. 主要有两种方法, 协议和 Blcok.

协议(JSExport)

Block

二.WKWebView

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

搬砖

程序员

iOS移动开发社区

iOS - WebView

iOS webView 与 JS 的交互

一.UIWebView

在UIWebView中,native与JS的交互其实就是通过拦截request的方式实现的. 主要有两种方法, 协议 和 Blcok.

协议(JSExport)

Block

二.WKWebView

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

搬砖

程序员

iOS移动开发社区

iOS - WebView

在UIWebView中,native与JS的交互其实就是通过拦截request的方式实现的. 主要有两种方法, 协议和 Blcok.