美文网首页我爱编程
OC 与 JS 交互之 WKWebView

OC 与 JS 交互之 WKWebView

作者: 搬砖行家 | 来源:发表于2017-12-20 11:56 被阅读0次

    看到一篇文章非常好,就直接学习了,搞到自己简书中,用于自己平常项目中,封装留存。如果不同的建议,可以提出,共同探讨与学习!如有侵权,告知,删除。

    WKWebView

    WKWebView 是苹果爸爸在 iOS8 推出的希望替代 UIWebView 的WebView,推出了很多新的功能,新的属性,并且通过 WKScriptMessageHandler、WKNavigationDelegate、WKUIDelegate 这三个协议,让请求、执行 web 页面的过程变得更加可控。

    与之交互用到的三大代理:

    WKNavigationDelegate:与页面导航加载相关

    WKUIDelegate:与 JS 交互时的 UI 展示相关,比较 JS 的alert、confirm、prompt

    WKScriptMessageHandler:与 JS 交互相关,通常是 iOS 端注入名称,JS 端通过 window.webkit.messageHandlers.{NAME}.postMessage()来发消息到 iOS 端

    关于 WKWebView 的更多细节有时间再总结下,今天先说说有关 OC 与 JS 交互的过程。

    OC 调用 JS
    WKWebViewConfiguration *configuration = [WKWebViewConfiguration new];
    configuration.userContentController = [WKUserContentController new];
    
    NSString *sourceStr = @"alert('在载入webview时通过oc注入的js方法');";
    WKUserScript *script = [[WKUserScript alloc] initWithSource:sourceStr injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];
    [configuration.userContentController addUserScript:script];
    
    _webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];
    _webView.UIDelegate = self;
    
    

    生成的 configuration ,包含了之后新建 webView 的一系列属性;再生成一个脚本片段,包含 JS 的 alert 语句,将其加给 configuration 的 userContentController,在开始加载 web 页面时,注入 JS 方法,执行这个 JS 语句。

    或者用 webView 的 evaluateJavaScript 直接调用 JS,与 JavaScriptCore 中的 evaluateScript 类似:

    NSString *script = @"alert('webview 直接调用 JS 方法');";    
    [self.webView evaluateJavaScript:script completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        NSLog(@"result: %@, error: %@", result, error);
    }];
    
    

    由于苹果爸爸要求用 native 的方式处理 web 中的弹框,这里就需要

    controller 实现 UIDelegate 中的方法,拿到 JS 中的参数,生成弹框,提醒用户:

    - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler
    {
        UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"Tip" message:message preferredStyle:UIAlertControllerStyleAlert];
        [alertController addAction:[UIAlertAction actionWithTitle:@"Ok" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
            completionHandler();
        }]];
        [self presentViewController:alertController animated:YES completion:nil];
    }
    
    

    效果如图:

    [图片上传失败...(image-b4f192-1513742096926)]

    UIDelegate 有不同的协议方法分别对应 native 确定、选择、输入文本框的等弹框,效果还不错~

    JS 调用 OC

    先新建一个 html 文件如下:

    <!DOCTYPE html>
    <html>
        <head>
            <title>test javascript</title>
            <style type="text/css">
                * {font-size: 40px;}
            </style>
        </head>    
        <body>        
            <div style="margin-top: 100px">
                <input type="button" value="js call oc" onclick="jsCallOC()">
            </div> 
            <script type="text/javascript">
                function jsCallOC(){
                    var message = {
                        'method' : 'jsCallOC',
                        'param1' : 'zn',
                    };
                window.webkit.messageHandlers.AppModel.
                postMessage({body: message});
                }
            </script>
        </body>
    </html>
    
    

    点击按钮,调用 JS 方法,在 JS 中

    window.webkit.messageHandlers.{NAME}.postMessage() 将 JS 中的对象转换为 OC 中的处理消息对象,并且将 message 传递给他。

    //将 self 作为 AppModel ,处理 JS 传递过来的数据
    [configuration.userContentController addScriptMessageHandler:self name:@"AppModel"];
    
    

    拿到 message 后,self 需要继承 WKWebView 的另一个协议 WKScriptMessageHandler 的方法,解析消息,从而实现 JS 到 OC 的调用:

    // MARK: - WKScriptMessageHandler
    // 注入 JS 名称,在 JS 端通过 window.webkit.messageHandlers.AppModel.postMessage() 方法来发送消息到 native
    - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
    {
        NSLog(@"messageBody:  %@", message.body);
        NSLog(@"messageName: %@", message.name);
    }
    

    相关文章

      网友评论

        本文标题:OC 与 JS 交互之 WKWebView

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