如果項(xiàng)目中沒(méi)有與復(fù)雜的Js交互,那么就不用經(jīng)歷下面這個(gè)相對(duì)復(fù)雜的探索過(guò)程了.
之前用webView與js交互
- (void)webViewDidFinishLoad:(UIWebView *)webView {
// 設(shè)置javaScriptContext上下文
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//將bsg對(duì)象指向自身//網(wǎng)頁(yè)端設(shè)置點(diǎn)擊方法：bsg.call()牧牢，call()方法由bsg對(duì)象調(diào)用，此處將自身設(shè)置為bsg對(duì)象，用來(lái)調(diào)用本地方法而非網(wǎng)頁(yè)方法
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
{
// 設(shè)置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通信
到這里我們會(huì)想如何拿到WKWebView JsContext上下文,可是很遺憾
我們無(wú)法獲取上下文，因?yàn)椴季趾蚃avaScript是在另一個(gè)進(jìn)程上處理的。
相反，將腳本添加到您的webview配置中同木，并將視圖控制器（或另一個(gè)對(duì)象）設(shè)置為腳本消息處理器messageHandlers。
現(xiàn)在跛十，從JavaScript發(fā)送消息彤路，如下所示：
// js代碼
window.webkit.messageHandlers.interOp.postMessage(message)
您的腳本消息處理程序?qū)⑹盏揭粋€(gè)回調(diào)：
// OC
- (void)userContentController:(WKUserContentController *)userContentController
didReceiveScriptMessage:(WKScriptMessage *)message{
NSLog(@"%@", message.body);
}
奇怪的是我們寫了代理方法也不會(huì)執(zhí)行,這是因?yàn)榻o我們?cè)瓉?lái)提供JS的前端代碼都是按UIWebView來(lái)寫的:
js示例
可以看出是這種形式,而不是
WKWebView的postMessage這種形式,這就是問(wèn)題所在了.
當(dāng)你的項(xiàng)目需要從UIWebView換成WKWebView時(shí)，或許會(huì)煩惱HTML那邊需要修改JS交互部分偶器，下面是解決方案斩萌，其實(shí)HTML并不需要修改任何代碼缝裤，而且iOS這邊改動(dòng)也非常簡(jiǎn)單屏轰。
首先假設(shè)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方法只接收一個(gè)參數(shù)榛做，如果傳多個(gè)參數(shù)唁盏，那么WKScriptMessage的body只接收到第一個(gè)參數(shù)
window.webkit.messageHandlers.callTemplate.postMessage(jsonDict);
}
iOS 端修改如下（本篇文章的重點(diǎn)）
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，那么對(duì)應(yīng)的scriptSource里邊的callTemplate也都修改為x锰瘸。
② scriptSource中jSBridgeInstance和sendMessage看你們的HTML的JS代碼而定刽严。
③如果原來(lái)的HTML的JS有三個(gè)參數(shù)，那么修改如下：
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);\
}";
更多參數(shù)時(shí)以此類推避凝。
實(shí)踐:這里是window.SCAJSBridge.invoke所以是如下寫法
#pragma mark 獲取js上下文
- (void)getJsContext {
//self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];//原來(lái)UIWebView獲取上下文的方式 WK無(wú)法沿用這種方式
// 新方法把self設(shè)置成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];
}
