美文网首页
WKWebView交互

WKWebView交互

作者: 走着走着就会敲代码了 | 来源:发表于2020-04-01 10:06 被阅读0次

前段时间因为SDK使用的还是UIWebView需要替换成WKWebView,替换的时候碰到一些问题这边记录一下哈。(前言之前都是使用牛逼的第三方DSBridge,支持JS、安卓、iOS三端统一,现在因为外在原因需要替换SDK内的UIWebView,UIWebView 的Api被苹果正式弃用了...)

本文主要讲的JS交互是使用输入框的方式runJavaScriptTextInputPanelWithPrompt,大概看了下DSBridge的实现也是使用runJavaScriptTextInputPanelWithPrompt来实现交互。

JS调用OC

JS调用OC有两种调用方式:

  • userContentController
  • runJavaScriptTextInputPanelWithPrompt

具体如下:

1、使用userContentController
注册JS方法
//这个类主要用来做native与JavaScript的交互管理
WKUserContentController * wkUController = [[WKUserContentController alloc] init];
//注册一个name为jsToOcNoPrams的js方法,设置处理接收JS方法的代理
[wkUController addScriptMessageHandler:self  name:@"jsToOcNoPrams"];
[wkUController addScriptMessageHandler:self  name:@"jsToOcWithPrams"];
config.userContentController = wkUController;
注册后记得remove
[[_webView configuration].userContentController removeScriptMessageHandlerForName:@"jsToOcNoPrams"];
[[_webView configuration].userContentController removeScriptMessageHandlerForName:@"jsToOcWithPrams"];

remove方法放在- (void)dealloc中会造成内存泄露,解决方式可以在视图消失,或者其他情况下进行remove!!!
视图出现&消失的解决方式,源码如下:

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];

    [_webView.configuration.userContentController addScriptMessageHandler:self name:@"getSign"];
}

- (void)viewWillDisappear:(BOOL)animated {
    [super viewWillDisappear:animated];

    [_webView.configuration.userContentController removeScriptMessageHandlerForName:@"getSign"];
}
调用注册方法后接收
注意:遵守WKScriptMessageHandler协议,代理是由WKUserContentControl设置

//通过接收JS传出消息的name进行捕捉的回调方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    NSLog(@"name:%@\\\\n body:%@\\\\n frameInfo:%@\\\\n",message.name,message.body,message.frameInfo);
    //用message.body获得JS传出的参数体
    NSDictionary * parameter = message.body;
    //JS调用OC
    if([message.name isEqualToString:@"jsToOcNoPrams"]){
      // 弹窗  等
    }else if([message.name isEqualToString:@"jsToOcWithPrams"]){
    }
}
问题

如果需求是在获取到JS的方法并获取到对应的message.body之后,需要给JS回调相应的数据时.多次并发调用,会导致回调JS失败.因为evaluateJavaScript多次调用同一个协议时,需要等上次H5中方法执行完成后才能继续调用否则会失败.
报错如下:

Error Domain=WKErrorDomain Code=4 "A JavaScript exception occurred" UserInfo={WKJavaScriptExceptionLineNumber=0, WKJavaScriptExceptionMessage=TypeError: undefined is not a function, WKJavaScriptExceptionColumnNumber=0, NSLocalizedDescription=A JavaScript exception occurred}
2、runJavaScriptTextInputPanelWithPrompt

H5调用,第一个参数对应OC代理回调中的prompt(该方法在H5页面中会显示输入框弹窗),第二个参数对应代理回调中的defaultText.

var cookie = window.prompt("getSign", params);

iOS 实现UIDelegate代理中的方法如下:

//JavaScript调用prompt方法后回调的方法 prompt是js中的输入框 需要在block中把用户输入的信息传入
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable))completionHandler{
    if (prompt && [prompt isEqualToString:@"getSign"]) {
        completionHandler(@"");
    }
}

注意点:prompt调用的是参数,不是函数,在判断上可能会有个问题,JS不能直接拿当函数进行全局判断.

iPad Air 2获取navigator.appVersion问题

之前在替换的时候碰到iPad Air2 iOS 12的系统,比较早的机型了JS那边在获取设备信息的时候通过是否包含iPad来判断,但是iPad Air2的设备信息不包含iPad字符串导致判断失效,排查的时候被误导了说JS能打印出JS调用OC的回调信息,然后排查了好一会儿还以为是交互在Air 2上失效~~~
iPad Air2的设备信息跟Mac的差不多大致如下:

navigator1 false 5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/605.1.15(KHTML, like Gecko) Version/1

OC调用JS

OC调用JS代码如下:

NSString *jsString = [NSString stringWithFormat:@"changeColor('%@')", @"Js参数"];
[_webView evaluateJavaScript:jsString completionHandler:^(id _Nullable data, NSError * _Nullable error) {
    NSLog(@"改变HTML的背景色");
}];

JS源码

附上网上找到的JS页面源码仅供参考哈

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        function loadURL(url) {
            var iFrame;
            iFrame = document.createElement("iframe");
            iFrame.setAttribute("src", url);
            iFrame.setAttribute("style", "display:none;");
            iFrame.setAttribute("height", "0px");
            iFrame.setAttribute("width", "0px");
            iFrame.setAttribute("frameborder", "0");
            document.body.appendChild(iFrame);
            // 发起请求后这个iFrame就没用了,所以把它从dom上移除掉
            iFrame.parentNode.removeChild(iFrame);
            iFrame = null;
        }

        function asyncAlert(content) {
            setTimeout(function(){
                alert(content);
            },1);
        }

        function showAlert() {
            window.webkit.messageHandlers.showAlert.postMessage(null);
        }

        function alertWithMessage(content) {
            asyncAlert(content);
            document.getElementById("returnValue").value = content;
        }

        function postString() {
            window.webkit.messageHandlers.postString.
            postMessage('r=10,g=170,b=250,a=0.5');
        }

        function postArray() {
            window.webkit.messageHandlers.postArray.
            postMessage([Math.floor(Math.random()*255),
                         Math.floor(Math.random()*255),
                         Math.floor(Math.random()*255),0.5]);
        }

        function postDictionary() {
            window.webkit.messageHandlers.postDictionary.
            postMessage({red: Math.floor(Math.random()*255),
                         green: Math.floor(Math.random()*255),
                         blue: Math.floor(Math.random()*255),
                         alpha: 0.5});
        }

        function postDictionary() {
             window.prompt("getSign");
        }

    </script>
</head>
<body>

    <input type="button" value="OC调用JS方法" onclick="showAlert()">
    <input type="button" value="JS传字符串" onclick="postString()">
    <input type="button" value="JS传数组" onclick="postArray()">
    <input type="button" value="JS传字典" onclick="postDictionary()">
    <input type="button" value="prompt" onclick="postDictionary()">

</body>
</html>

结语

坑踩完了...记录一下哈,后续有看到的人希望能直接趟过这些坑,emmm....

参考

iOS WKWebView的使用
iOS中js调用oc获取返回值(WKWebView)

相关文章

网友评论

      本文标题:WKWebView交互

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