在 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!