在 WKWebView 中启用 console.log

tags:ios, swift

随着 UIWebView 被Apple 放弃，开发者被迫转向 WKWebView 。可是WKWebView 的完成度极差，还有很多坑。很多人都在和这些坑战斗，比如这里 就列出了不少问题。

最近在和 WKWebView 战斗，需要将 javascript中通过console.log 打印的信息通过控制台输出。研究了一下，方案如下：

Swift 端

首先需要实现 WKScriptMessageHandler 的 userContentController 方法:

extension ViewController: WKScriptMessageHandler {
public func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage){
        let body = message.body as! String
        if message.name == "logger" {
            print("JS log:\(body)")
            return
        }
          //Other logic
    }

在创建 WKWebVeiw实例时将ViewController 添加到configuration中:

let webConfiguration = WKWebViewConfiguration()
        webConfiguration.userContentController.add(self, name: "logger")
        
        _browser = WKWebView(frame: CGRect.zero, configuration: webConfiguration)

Javascript 端

在javascript中重新声明console.log:

<script>
            var console = {};
            console.log = function(message){window.webkit.messageHandlers['logger'].postMessage(message)
            };
</script>

这段 javascript 代码可以放在模版文件中，也可以在加载 WKWebView 时动态注入进去。

这样你就可以在 XCode 的调试窗口看到 javascript 输出的信息了：

Happy coding!