在swiftui项目中使用WKWebView加载自定义脚本文件

167 阅读1分钟

1.确保你的 custom.js 文件已添加到项目目标中(在文件检查器中勾选目标成员资格)

2.对于复杂的 JavaScript 交互,可能需要使用 WKUserContentController 和 WKScriptMessageHandler

3.考虑 Web 内容加载时间,脚本注入应在页面加载完成后进行(如示例中的 didFinish navigation 回调)

4。如果需要与 Swift 代码通信,可以使用 evaluateJavaScript(_:completionHandler:) 方法

先添加js文件到项目中:

按照提示添加后,项目中就会显示你添加的文件:

然后再使用自定义一个加载文件逻辑:


extension WebView {
    static func loadJSFile(named filename: String) -> String? {
        guard let path = Bundle.main.path(forResource: filename, ofType: "js") else {
            print("Could not find \(filename).js in bundle")
            return nil
        }
        
        do {
            let jsString = try String(contentsOfFile: path, encoding: .utf8)
            return jsString
        } catch {
            print("Error loading \(filename).js: \(error)")
            return nil
        }
    }
}

 最后添加:

        // 2. 加载并注入自定义脚本
        if let customScript = WebView.loadJSFile(named: "custom") {
            let userScript = WKUserScript(
                source: customScript,
                injectionTime: .atDocumentStart,
                forMainFrameOnly: false
            )
            webView.configuration.userContentController.addUserScript(userScript)
        }

        // 3.load url
        webView.load(URLRequest(url: url))