ios 修改 html,iOS WKWebView的JS适配HTML（HTML不需要改动）

前言

当你的项目需要从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);\

}";

更多参数时以此类推。

后言

很庆幸学了HTML、CSS和JS，一开始什么是JS都不懂，那时候说什么JS交互，也只是会网上搜索一下资料，照葫芦画瓢。昨天在用Qt做WebView部分时，有所感悟，在下班回来的路上，突发奇想iOS是不是也可以稍微灵活一点，而不必web那边做修改呢，于是便进行了尝试，这篇文章便是成果。