WKWebView 的简单知识：修改 dom

1, 修改 dom， 隐藏元素

场景描述:

iOS 的 UINavigation Controller 导航到一个 Controller , 里面是 H5

决定采用 Navigation Bar 上面的返回按钮，抹去 H5 自带的返回按钮

解决: 注入脚本，配置 css

相关脚本:

var styleTag = document.createElement("style");

styleTag.textContent = 'element.class{display:none;}';

document.documentElement.appendChild(styleTag);

配合 WKWebView 的 js 注入

代码很好理解，不解释

let configuration = WKWebViewConfiguration()

        if let src = url, src.contains("xxxx.com"),let scriptURL = Bundle.main.path(forResource: "remove", ofType: "js"){

                do {

                    let scriptContent = try String(contentsOfFile: scriptURL)
                    // 这行的配置，需准确
                    let script = WKUserScript(source: scriptContent, injectionTime: .atDocumentStart, forMainFrameOnly: true)

                    let userContentController = WKUserContentController()

                    userContentController.addUserScript(script)

                    configuration.userContentController = userContentController

                } catch {

                    print(error)

                }

        }

        self.webView = WKWebView(frame: rect,

                                 configuration: configuration)

错误示范:

网页加载完成后，

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)

走一段 js 代码

webView.evaluateJavaScript()

感觉，直接修改 dom 无效。修改完后，还要刷新 dom。

load iframe, 好像可以

2, H5 与 native 的互发消息

标准答案: WebViewJavascriptBridge， 他提供的回调，好

一般，先设置 webView 代理

• native 给 H5 发消息:

bridge?.callHandler(jsMethods.one, data: data)

• native 收到 H5 的消息:

bridge?.registerHandler(jsMethods.two) { [weak self] anyThing, responseCallback in
               guard let `self` = self else { return }
               responseCallback?(self.roomID)
           }
           

搞笑示范:

• native 给 H5 发消息, 拿回调:

webView evaluate 一下 script

通过 js 给 webView 发消息，

在代理方法里面，拿回调

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage)

• H5 给 native 发消息, 拿回调:

类似的， ha ha ha

3, WebViewJavascriptBridge 这个库里面的 UIWebView 相关，需要去除

代码带有 UIWebView， app store, 现在上不去

github repo