前段时间因为SDK使用的还是UIWebView需要替换成WKWebView，替换的时候碰到一些问题这边记录一下哈。（前言之前都是使用牛逼的第三方DSBridge，支持JS、安卓、iOS三端统一，现在因为外在原因需要替换SDK内的UIWebView，UIWebView 的Api被苹果正式弃用了...）
本文主要讲的JS交互是使用输入框的方式runJavaScriptTextInputPanelWithPrompt，大概看了下DSBridge的实现也是使用runJavaScriptTextInputPanelWithPrompt来实现交互。
JS调用OC
JS调用OC有两种调用方式：
userContentControllerrunJavaScriptTextInputPanelWithPrompt
具体如下：
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....
