iOS中UIViewRepresentable封装的WKWebView无法加载本地JS文件

我是Swift和iOS开发新手，在UIViewRepresentable封装的WKWebView中，通过HTML字符串引入本地JavaScript文件（change-color.js）后，该JS代码并未运行，期望能成功加载并执行这个本地JS文件。相关代码及目录结构如下：

ContentView代码 #

import SwiftUI

struct ContentView: View {
    var body: some View {
        let HTMLString =
            """
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width">
            <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
            <script>var formula = document.getElementById('formula');formula.style.color="#FF0000"</script>
            <p id="formula" style="font-size: 35px;">
                      \\[A = P(1+r)^t\\]
            </p>
            <script src="change-color.js"></script>
            """
        HTMLView(htmlString: HTMLString).frame(width: .infinity, height: 80)
    }
}

change-color.js代码 #

var formula = document.getElementById('formula');
formula.style.color="#FF0000";

HTMLView代码 #

import SwiftUI
import WebKit

struct HTMLView: UIViewRepresentable {
    
    let htmlString: String
    
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        webView.scrollView.isScrollEnabled = false
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.loadHTMLString(htmlString, baseURL: nil)
    }
}

文件目录结构 #

核心问题分析 #

1. BaseURL未设置：调用loadHTMLString时传入baseURL: nil，WebView无法定位本地文件路径，导致无法加载change-color.js。
2. DOM加载顺序问题：JS代码在目标DOM元素渲染前执行，会出现找不到元素的情况。

修复步骤 #

1. 设置正确的BaseURL
   修改HTMLView的updateUIView方法，传入App的Bundle URL作为BaseURL，让WebView能找到本地资源：

func updateUIView(_ uiView: WKWebView, context: Context) {
    uiView.loadHTMLString(htmlString, baseURL: Bundle.main.bundleURL)
}

2. 确保JS在DOM就绪后执行
   修改change-color.js，用DOMContentLoaded事件包裹代码，确保DOM渲染完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
    const formula = document.getElementById('formula');
    if (formula) {
        formula.style.color = "#FF0000";
    }
});

3. 调整HTML中元素的顺序
   将<p id="formula">提前到JS代码之前，避免内联JS找不到元素：

let HTMLString =
    """
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <p id="formula" style="font-size: 35px;">
              \\[A = P(1+r)^t\\]
    </p>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <script src="change-color.js"></script>
    """

4. 验证文件的Target Membership
   确认change-color.js已添加到当前项目的Target中（在文件检查器的"Target Membership"下勾选对应Target）。

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