SwiftUI中WKWebView与HTML5 JavaScript通信异常排查

代码存在两个核心错误，直接导致JS侧window.webkit为undefined、消息通信失效：

• WKWebViewConfiguration仅在WKWebView初始化阶段生效，你在updateUIView中新建的configuration、userContentController没有关联到当前传入的WKWebView实例，所有配置均无效
• 调用uiView.load()触发页面加载后才注册messageHandler，时序错误，页面加载阶段JS上下文里还没有注入对应的消息处理器

Swift端（SwiftUI WKWebView封装） #

WKWebView的所有配置必须在初始化时传入，配置逻辑要放在makeUIView生命周期中实现，updateUIView仅负责触发页面加载：

import SwiftUI
import WebKit

// 消息处理类，遵循WKScriptMessageHandler协议
class JSMessageHandler: NSObject, WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        // 处理JS端发送的消息
        guard message.name == "messageHandler" else { return }
        print("收到JS端消息：\(message.body)")
        // 在这里写对应业务逻辑
    }
}

struct CustomWebView: UIViewRepresentable {
    let targetUrl: String
    private let messageHandler = JSMessageHandler()
    
    func makeUIView(context: Context) -> WKWebView {
        // 初始化配置，必须在WKWebView初始化前完成配置
        let webConfig = WKWebViewConfiguration()
        let userContentVC = WKUserContentController()
        // 提前注册消息处理器，必须在webview初始化、页面加载前完成注册
        userContentVC.add(messageHandler, name: "messageHandler")
        webConfig.userContentController = userContentVC
        
        // 传入配置初始化WKWebView，初始化完成后configuration属性为只读，修改无效
        let webView = WKWebView(frame: .zero, configuration: webConfig)
        
        // 禁用缓存逻辑
        URLCache.shared.removeAllCachedResponses()
        URLCache.shared.diskCapacity = 0
        URLCache.shared.memoryCapacity = 0
        
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        // 仅在这里处理页面加载逻辑，不要新建configuration
        guard let url = URL(string: targetUrl) else { return }
        uiView.load(URLRequest(url: url))
    }
}

JavaScript端调用方式 #

WKWebView加载完成后会自动向JS上下文注入window.webkit对象，直接调用对应方法即可向原生发送消息：

// 增加环境判断，避免在非WKWebView环境下报错
if (window.webkit?.messageHandlers?.messageHandler) {
    // postMessage支持传入所有JSON可序列化类型：字符串、数字、普通对象、数组
    window.webkit.messageHandlers.messageHandler.postMessage({
        action: "share",
        content: "JS向原生传递的测试内容"
    })
}

• WKWebView初始化后不要尝试修改其configuration属性，所有配置、脚本、消息处理器注册都要在初始化前完成
• 注意内存问题，如果消息处理器持有WKWebView实例，要在页面销毁或合适时机调用removeScriptMessageHandler(forName:)移除注册的handler
• 如果是加载本地HTML文件，要确保文件路径正确，本地文件加载权限配置错误也可能导致JS注入失效

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