如果项目中没有与复杂的Js交互,那么就不用经历下面这个相对复杂的探索过程了.
之前用webView与js交互
- (void)webViewDidFinishLoad:(UIWebView *)webView {
// 设置javaScriptContext上下文
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//将bsg对象指向自身//网页端设置点击方法：bsg.call()，call()方法由bsg对象调用，此处将自身设置为bsg对象，用来调用本地方法而非网页方法
self.jsContext[@"ios"] = self;
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息：%@", exceptionValue);
};
}
想把webView替换成WKWebView，于是这样写：
-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{
// 设置javaScriptContext上下文
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
self.jsContext[@"ios"] = self;
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息：%@", exceptionValue);
};
}
然后就崩溃了,在self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];这里崩了,原因就是WKWebView不支持JavaScriptCore的方式, 但提供messagehandler的方式为JavaScript与OC通信
到这里我们会想如何拿到WKWebView JsContext上下文,可是很遗憾
我们无法获取上下文，因为布局和JavaScript是在另一个进程上处理的。
相反，将脚本添加到您的webview配置中，并将视图控制器（或另一个对象）设置为脚本消息处理器messageHandlers。
现在，从JavaScript发送消息，如下所示：
// js代码
window.webkit.messageHandlers.interOp.postMessage(message)
您的脚本消息处理程序将收到一个回调：
// OC
- (void)userContentController:(WKUserContentController *)userContentController
didReceiveScriptMessage:(WKScriptMessage *)message{
NSLog(@"%@", message.body);
}
奇怪的是我们写了代理方法也不会执行,这是因为给我们原来提供JS的前端代码都是按UIWebView来写的:
js示例
可以看出是这种形式,而不是
WKWebView的postMessage这种形式,这就是问题所在了.
当你的项目需要从UIWebView换成WKWebView时，或许会烦恼HTML那边需要修改JS交互部分，下面是解决方案，其实HTML并不需要修改任何代码，而且iOS这边改动也非常简单。
首先假设HTML原本的JavaScript交互代码如下
//JS代码 - 1
if (window.jSBridgeInstance && window.jSBridgeInstance.sendMessage) {
var act = "Action";
var jsonDict = {
"imagUrl": "",
"title": "积分商城",
"login": "0"
};
window.jSBridgeInstance.sendMessage(act, jsonDict);
}
如果要改HTML端的话，需要修改如下（但是我们不改HTML，我们改iOS端代码）
//JS代码 - 2
//如果修改HTML的JS代码，则iOS不需要修改
if (window.webkit && window.webkit.messageHandlers) {
var act = "Action";
var jsonDict = {
"act" : act,
"imagUrl": "",
"title": "积分商城",
"login": "0"
};
//注意，iOS的postMessage方法只接收一个参数，如果传多个参数，那么WKScriptMessage的body只接收到第一个参数
window.webkit.messageHandlers.callTemplate.postMessage(jsonDict);
}
iOS 端修改如下（本篇文章的重点）
OC代码
//iOS 代码 - 1
//如果修改iOS代码，则JS代码不需要修改
WKWebViewConfiguration *config = [WKWebViewConfiguration new];
[config.userContentController addScriptMessageHandler:[[WeakScriptMessageDelegate alloc] initWithDelegate:self] name:@"callTemplate"];
NSString *scriptSource = @"\
window.jSBridgeInstance = window.webkit.messageHandlers.callTemplate;\
window.jSBridgeInstance.sendMessage = function(act, json) {\
var jsonDict = {\
\"key1\": act,\
\"key2\": json\
};\
window.webkit.messageHandlers.callTemplate.postMessage(jsonDict);\
}";
WKUserScript *script = [[WKUserScript alloc] initWithSource:scriptSource injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:false];
[config.userContentController addUserScript:script];
_webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
Swift代码
//iOS 代码 - 2
//如果修改iOS代码，则JS代码不需要修改
let config: WKWebViewConfiguration = WKWebViewConfiguration();
config.userContentController.add(WeakScriptMessageDelegate.initWith(self), name: "callTemplate");
let scriptSource: String = """
window.jSBridgeInstance = window.webkit.messageHandlers.callTemplate;
window.jSBridgeInstance.sendMessage = function(act, json) {
var jsonDict = {
"key1": act,
"key2": json
};
window.webkit.messageHandlers.callTemplate.postMessage(jsonDict);
}
""";
let script:WKUserScript = WKUserScript.init(source: scriptSource, injectionTime: .atDocumentStart, forMainFrameOnly: false);
config.userContentController.addUserScript(script);
webView = WKWebView.init(frame: self.view.bounds, configuration: config);
注：
①第二行callTemplate可以随意命名，假如你命名为x，那么对应的scriptSource里边的callTemplate也都修改为x。
② scriptSource中jSBridgeInstance和sendMessage看你们的HTML的JS代码而定。
③如果原来的HTML的JS有三个参数，那么修改如下：
NSString *scriptSource = @"\
window.jSBridgeInstance = window.webkit.messageHandlers.callTemplate;\
window.jSBridgeInstance.sendMessage = function(param1, param2, param3) {\
var jsonDict = {\
\"key1\": param1,\
\"key2\": param2,\
\"key3\": param3,\
};\
window.webkit.messageHandlers.callTemplate.postMessage(jsonDict);\
}";
更多参数时以此类推。
实践:这里是window.SCAJSBridge.invoke所以是如下写法
#pragma mark 获取js上下文
- (void)getJsContext {
//self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];//原来UIWebView获取上下文的方式 WK无法沿用这种方式
// 新方法把self设置成ScriptMessageHandler
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"callTemplate"];
NSString *scriptSource = @"\
window.SCAJSBridge = window.webkit.messageHandlers.callTemplate;\
window.SCAJSBridge.invoke = function(param1, param2, param3) {\
var jsonDict = {\
\"key1\": param1,\
\"key2\": param2,\
\"key3\": param3,\
};\
window.webkit.messageHandlers.callTemplate.postMessage(jsonDict);\
}";
WKUserScript *script = [[WKUserScript alloc] initWithSource:scriptSource injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:false];
[self.webView.configuration.userContentController addUserScript:script];
}