iOS Swift中如何在WKWebView内通过类名隐藏元素？

要修改的文件 #

就是你当前的ViewController.swift文件，所有相关逻辑都集中在这个类中。

原代码失效的原因 #

1. JS执行时机过早：你在viewDidLoad或loadView中直接调用evaluateJavaScript，此时网页还在加载过程中，DOM元素尚未生成，自然找不到目标元素。
2. JS语法错误：原代码里写的document.getElementByClassName是错误的，正确写法是document.getElementsByClassName（注意复数Elements），这个方法返回的是元素集合，需要通过索引获取具体元素。
3. 选择器准确性存疑：如果webview-d-none不是谷歌登录按钮的正确类名，也会导致隐藏失败。

修正后的实现代码 #

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {
    
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        webView.allowsBackForwardNavigationGestures = true
        webView.uiDelegate = self
        let targetUrl = URL(string: "https://www.true-elements.com/")!
        webView.load(URLRequest(url: targetUrl))
    }
    
    override func loadView() {
        webView = WKWebView()
        webView.navigationDelegate = self
        view = webView
    }
    
    // 网页加载完成后触发，此时DOM已就绪，适合执行JS
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 确保JS语法正确，先判断元素是否存在再隐藏
        let hideScript = """
            let targetElements = document.getElementsByClassName('webview-d-none');
            if (targetElements.length > 0) {
                targetElements[0].style.display = 'none';
            }
        """
        
        webView.evaluateJavaScript(hideScript) { result, error in
            if let error = error {
                print("JS执行失败：\(error.localizedDescription)")
            } else {
                print("目标元素已隐藏")
            }
        }
        
        // 如果上述类名不正确，可替换为谷歌登录按钮的实际选择器（示例）
        // let googleLoginScript = """
        //     let googleBtn = document.querySelector('.google-login-button');
        //     if (googleBtn) { googleBtn.style.display = 'none'; }
        // """
        // webView.evaluateJavaScript(googleLoginScript, completionHandler: nil)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

额外注意事项 #

• 确认目标元素选择器：打开目标网页，右键点击谷歌登录按钮选择「检查」，查看元素的类名、id或其他属性，替换到JS代码的选择器中，确保能精准定位。
• 错误排查：通过evaluateJavaScript的completionHandler打印错误信息，能快速定位是选择器问题还是执行时机问题。

内容的提问来源于stack exchange，提问作者user19688294