WKWebView交互
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....
参考
iOS WKWebView的使用
iOS中js调用oc获取返回值（WKWebView）
Swift WKWebview与JS互调
项目需求：
一. js调用app方法并同步返回值
js端调用方式：
let res = test("helloworld")
js端的关键代码：
let params = JSON.stringify(params)
let data = {
"method": method, // 传入test
"params": params // 传入helloworld
}
// 使用prompt方法传递参数
let res = prompt(JSON.stringify(data))
return res
swift端的代码：
// 1.注册 这种注册是有返回值
webview.configuration.userContentController.addScriptMessageHandler(self, contentWorld: .page, name: "test")
// 2.继承 WKScriptMessageHandlerWithReply 类
extension WebViewController: WKScriptMessageHandler, WKScriptMessageHandlerWithReply{
/// prompt方式 对应js调用prompt("test")
func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {
let jsonObj = JSON.init(parseJSON: prompt)
let method = jsonObj["method"].stringValue
let params = jsonObj["params"].stringValue
print(method)
if method == "test" {
let result = self.test(params)
// result就是返回的值
completionHandler(result)
}
else {
completionHandler("")
}
}
}
二. js调用app方法，使用Promise风格返回值
js端调用方式：.then方式
test("helloworld").then(res=>{
console.log("promise ",res)
})
js端的代码：(伪代码)
return new Promise((resolve, reject) => {
if (this.brower() === 'android') {
...
} else if (this.brower() === 'ios') {
if (window.webkit !== undefined) {
params = JSON.stringify(params)
// method是字符串参数
let res = window.webkit.messageHandlers[method]['postMessage'](params)
resolve(res)
} else { reject('40001')}
}
swift端的代码：
// 1.注册 这种注册是有返回值
webview.configuration.userContentController.addScriptMessageHandler(self, contentWorld: .page, name: "test")
// 2.继承 WKScriptMessageHandlerWithReply 类
/// 返回值Handle 可对接js的Promise风格 .then返回的值
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage, replyHandler: @escaping (Any?, String?) -> Void) {
print("传来的方法为", message.name)
print("传来的参数为", message.body)
if message.name == "test" {
let result = self.test(message.body)
replyHandler(result, nil) // first var is success return val, second is err string if error
}
}
三. js调用app方法，用app回调js的方法去返回值
js端调用方式：
test({
params: “helloworld”,
success: res=>{
console.log("test",res)
}
})
js端的关键代码：
test(params) {
window['TestSuccess'] = params.success
// ...省略调用app的方法了
}
swift端的代码：
// 1.注册 这种注册无返回值
webview.configuration.userContentController.add(self, name: "test")
// 2.继承 WKScriptMessageHandler 类
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage, replyHandler: @escaping (Any?, String?) -> Void) {
print("传来的方法为", message.name)
print("传来的参数为", message.body)
if message.name == "test" {
let strRes = self.test(message.body)
// 成功采用回调js方法
webview.evaluateJavaScript("TestSuccess((strRes))") { (jsmessage, err) in
print("成功回调(String(describing: jsmessage)),(String(describing: err))")
}
}
}
总结：
-
同步返回值 用第一种方法
-
异步返回值 用第三种方法 app回调js方法
-
没有返回值 就不回调js
至于第二种方式，前端写了这种方法只能也去实现。
WKWebview 中 JS 获得原生代码回调的几种方式
