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