时间戳

首页 > 解决方案 > Swift Inject Javascript 将 HTML 元素删除到 WebView

swift - Swift Inject Javascript 将 HTML 元素删除到 WebView

问题描述

我正在尝试将自己直接注入源代码。

我们希望通过将 javascript 注入 webview 来执行此脚本以删除 google.com 上的横幅，但它不起作用。

这是我们试图删除的代码块：

<mobile-promo jsname="EfADOe" jscontroller="sqHuef" jsaction="rcuQ6b:npT2md"> </mobile-promo>

这是行不通的：

func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
    let removeGoogleBottomBar = """
        function removeDummy() {
            var elem = document.getElementById('mobile-promo');
            elem.parentNode.removeChild(elem);
            return false;
        }
        removeDummy()
    """
    webView.evaluateJavaScript(removeGoogleBottomBar)
}

这种注入javascript的方法有什么问题吗？

标签： swiftwebkitwkwebview

解决方案

首先，您的 javascript 代码将永远无法工作，因为您尝试使用 id 检索元素mobile-promo，但元素的标记名称是mobile-promo. （并且它没有 id 属性）

如果只有一个带有mobile-promoas 标记的 HTML 元素，那么下面的 javascript 代码将起作用：

function removeDummy() {
    var elem = document.getElementsByTagName('mobile-promo')[0];
    elem.parentNode.removeChild(elem);
    return false;
}
removeDummy()

如果没有，那么你应该这样做：

function removeDummy() {
    var elem = document.getElementsByTagName('mobile-promo');
    for (var i = 0; i < elem.length; i++) {
        if (elem[i].getAttribute("jsname") == "EfADOe" && elem[i].getAttribute("jscontroller") == "sqHuef" && elem[i].getAttribute("jsaction") == "rcuQ6b:npT2md") {
            elem[i].parentNode.removeChild(elem[i]);
        }
    }
    return false;
}
removeDummy()

要注入您的 javascript 代码， iOS 8 提供了WKUserScript API。您可以在以下位置执行以下操作viewDidLoad：

override func viewDidLoad() {
    super.viewDidLoad()
    
    let source = """
    function removeDummy() {
        var elem = document.getElementsByTagName('mobile-promo')[0];
        elem.parentNode.removeChild(elem);
        return false;
    }
    removeDummy()
    """
    let script = WKUserScript(source: source, injectionTime: .atDocumentEnd, forMainFrameOnly: false)
    webView.configuration.userContentController.addUserScript(script)
}

请注意，为了安全起见，我们将.atDocumentEnd作为injectionTime参数传递。正如文件所述：

在文档完成加载后，但在其他子资源完成加载之前注入脚本。

推荐阅读