如何在HTML代码中使用Swift变量？附相关代码示例

嘿，我看你在尝试用WKWebView把Swift变量传到HTML里，这其实有几种很实用的方式，我结合你的代码场景给你拆解下：

如果你的HTML内容可以在Swift里构造，直接把Swift变量替换到HTML模板的对应位置就行，简单直接：

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 先写好带占位符的HTML模板
    let htmlTemplate = """
    <html>
        <body>
            <p>Swift传来的测试变量：<strong>{testVar}</strong></p>
            <p>当前输入的用户名：<strong>{username}</strong></p>
        </body>
    </html>
    """
    // 替换模板里的占位符为实际Swift变量值
    let filledHtml = htmlTemplate
        .replacingOccurrences(of: "{testVar}", with: testVar)
        .replacingOccurrences(of: "{username}", with: usernameTextField.text ?? "")
    
    // 加载填充好变量的HTML
    webView.frame = CGRect(x: 0, y: 300, width: 300, height: 300)
    view.addSubview(webView)
    webView.loadHTMLString(filledHtml, baseURL: nil)
}

如果你加载的是远程URL（就像你代码里的"someUrl"），可以等网页加载完成后，用evaluateJavaScript把Swift变量注入到网页的JS环境中，之后HTML就能调用这些变量：

首先要给WKWebView设置代理，监听加载完成事件：

class LoginViewController: UIViewController, WKNavigationDelegate { // 添加上代理协议
    
    @IBOutlet weak var usernameTextField: UITextField!
    @IBOutlet weak var passwordTextField: UITextField!
    var testVar = "test"
    var theResult: String = ""
    let webView = WKWebView()

    override func viewDidLoad() {
        super.viewDidLoad()
        webView.navigationDelegate = self // 设置代理
        webView.frame = CGRect(x: 0, y: 300, width: 300, height: 300)
        view.addSubview(webView)
        
        let url = URL(string: "someUrl")!
        let request = URLRequest(url: url)
        webView.load(request)
    }
    
    // 网页加载完成后触发
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 把Swift变量转为全局JS变量，还可以直接调用网页里的JS函数
        let jsCode = """
        window.swiftTestVar = "\(testVar)";
        window.swiftUsername = "\(usernameTextField.text ?? "")";
        // 假设网页里有这个更新内容的函数
        updatePageWithSwiftVars();
        """
        webView.evaluateJavaScript(jsCode) { (result, error) in
            if let error = error {
                print("传值出错：\(error.localizedDescription)")
            }
        }
    }
}

然后你的HTML里可以这样使用这些变量：

<script>
function updatePageWithSwiftVars() {
    document.getElementById("test-var").textContent = window.swiftTestVar;
    document.getElementById("username").textContent = window.swiftUsername;
}
</script>
<p>测试变量：<span id="test-var"></span></p>
<p>用户名：<span id="username"></span></p>

如果你希望网页一开始加载就能拿到Swift变量，可以在初始化WKWebView时注入用户脚本，把变量提前放到JS环境里：

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 安全处理变量（避免引号、换行等特殊字符导致JS语法错误）
    let safeTestVar = testVar.replacingOccurrences(of: "\"", with: "\\\"")
    let safeUsername = (usernameTextField.text ?? "").replacingOccurrences(of: "\"", with: "\\\"")
    
    // 构造要注入的JS代码
    let jsScript = """
    window.swiftTestVar = "\(safeTestVar)";
    window.swiftUsername = "\(safeUsername)";
    """
    // 创建用户脚本，设置在文档加载前注入
    let userScript = WKUserScript(
        source: jsScript,
        injectionTime: .atDocumentStart,
        forMainFrameOnly: true
    )
    
    // 配置WKWebView并添加脚本
    let config = WKWebViewConfiguration()
    config.userContentController.addUserScript(userScript)
    
    let webView = WKWebView(frame: CGRect(x: 0, y: 300, width: 300, height: 300), configuration: config)
    view.addSubview(webView)
    
    let url = URL(string: "someUrl")!
    let request = URLRequest(url: url)
    webView.load(request)
}

这样网页里的JS在加载初期就能直接访问window.swiftTestVar这类变量了。

小提示 #

如果变量里有特殊字符（比如引号、换行），直接拼接会导致JS语法错误，更稳妥的方式是用JSONSerialization把Swift变量转成合法的JS格式：

if let jsonData = try? JSONSerialization.data(withJSONObject: testVar),
   let jsSafeString = String(data: jsonData, encoding: .utf8) {
    let jsCode = "window.swiftTestVar = \(jsSafeString);"
    // 后续注入或调用evaluateJavaScript
}

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