SwiftUI中WebView加载网页时隐藏指定元素的实现求助

要隐藏网页里的菜单等元素，最直接的方法是在网页加载完成后注入JavaScript代码，通过DOM操作隐藏指定元素。以下是修改后的完整代码，附带详细说明：

修改后的代码 #

import SwiftUI
import WebKit

struct Home: View {
    @State private var showWebView = false
    private let urlString: String = "https://mywebsite"
    @Binding var showMenu: Bool

    var body: some View {
        VStack{
            HStack{
                WebViewHome(url: URL(string: urlString)!)
                    .frame(height: .infinity)
            }
            .padding([.top], 0)
            Spacer()
        }
    }
}

struct WebViewHome: UIViewRepresentable{
    var url: URL
    
    // 定义协调器，处理网页加载事件
    class Coordinator: NSObject, WKNavigationDelegate {
        var parent: WebViewHome
        
        init(_ parent: WebViewHome) {
            self.parent = parent
        }
        
        // 网页加载完成后执行JS
        func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
            // 替换成你要隐藏元素的CSS选择器，比如菜单的类名/ID
            let hideElementsJS = """
            // 示例：隐藏class为"header-menu"的元素和ID为"sidebar"的元素
            document.querySelector('.header-menu')?.style.display = 'none';
            document.querySelector('#sidebar')?.style.display = 'none';
            """
            webView.evaluateJavaScript(hideElementsJS) { result, error in
                if let error = error {
                    print("执行JS出错：\(error.localizedDescription)")
                }
            }
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func makeUIView(context: Context) -> WKWebView {
        let prefs = WKWebpagePreferences()
        prefs.allowsContentJavaScript = true
    
        let config = WKWebViewConfiguration()
        config.defaultWebpagePreferences = prefs
        
        let webView = WKWebView()
        webView.navigationDelegate = context.coordinator // 设置导航代理
        return webView
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        let request = URLRequest(url: url)
        uiView.load(request)
    }
}

关键步骤说明 #

• 添加Coordinator协调器：实现WKNavigationDelegate协议，监听网页加载完成事件didFinish，确保在网页DOM完全加载后再执行JS。
• 注入JavaScript：在didFinish方法里，通过evaluateJavaScript执行DOM操作代码。你需要：
  1. 打开公司官网的网页，用浏览器开发者工具（右键→检查）找到要隐藏元素的CSS选择器（比如类名、ID）。
  2. 把示例里的.header-menu和#sidebar替换成实际的选择器，多个元素可以用多行JS代码依次隐藏。
• 启用JavaScript：你的代码已经设置了allowsContentJavaScript = true，这是执行JS的必要前提，无需修改。

额外提示 #

如果网页是动态加载的（比如菜单元素通过AJAX加载），didFinish可能无法捕获元素加载完成的时机，这时可以改用WKUserScript注入一段监听DOM变化的脚本，或者延迟执行JS（比如用setTimeout）。

内容的提问来源于stack exchange，提问作者Igor Ferreira Cecotte