WKWebView - 在没有看到变化的情况下评估 JavaScript

Question

在我的 SwiftUI 应用程序中，我使用 WKWebView 使用 SwiftUI TextFields 从本机端更新一些 html 标签。 为了使通信正常工作，我使用evaluateJavaScript()方法将数据从本机发送到 webview。

我的代码如下所示：

struct DemoView: View {
    @State private var headline: String = "Initial"

    var body: some View {
        NavigationView {
            VStack {
                Form {
                    TextField("Your headline", text: $headline)
                }
                WebView(headline: $headline)
            }
        }
    }
}

import WebKit

let bridgeHTML = """
 <!DOCTYPE html>
 <html>
 <head>
 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, viewport-fit=cover">
 </head>
 <body>
 <h3 id="headline">Headline</h3>
 <script>
    // to receive messages from native
      webkit.messageHandlers.bridge.onMessage = (msg) => {
        document.getElementById("headline").textContent = msg
      }
    </script>
    </body>
    </html>
"""

struct WebView: UIViewRepresentable {

    @Binding var headline: String

    class Coordinator: NSObject, WKNavigationDelegate, WKScriptMessageHandler {
        func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        }

        private var owner: WebView
        init(owner: WebView) {
            self.owner = owner
        }

        var webView: WKWebView?
        func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
            self.webView = webView
            self.messageToWebview(msg: self.owner.headline)   // initial value loading !!
        }

        func messageToWebview(msg: String) {
            self.webView?.evaluateJavaScript("webkit.messageHandlers.bridge.onMessage('\(msg)')")
        }
    }

    func makeCoordinator() -> Coordinator {
        return Coordinator(owner: self)
    }

    func makeUIView(context: Context) -> WKWebView {
        let userContentController = WKUserContentController()
        userContentController.add(context.coordinator, name: "bridge")

        let configuration = WKWebViewConfiguration()
        configuration.userContentController = userContentController

        let _wkwebview = WKWebView(frame: .zero, configuration: configuration)
        _wkwebview.navigationDelegate = context.coordinator

        guard let path: String = Bundle.main.path(forResource: "index", ofType: "html") else { return _wkwebview }
        let localHTMLUrl = URL(fileURLWithPath: path, isDirectory: false)
        _wkwebview.loadFileURL(localHTMLUrl, allowingReadAccessTo: localHTMLUrl)

//        _wkwebview.loadHTMLString(bridgeHTML, baseURL: nil)    // << used for testing

        return _wkwebview
    }

    func updateUIView(_ webView: WKWebView, context: Context) {
        // this works for update, but for initial it is too early !!
        webView.evaluateJavaScript("webkit.messageHandlers.bridge.onMessage('\(headline)')")
    }
}

它可以工作，在didFinish()委托方法中，我设置了要在网页上呈现的初始值。 当我输入内容时，它会自动在网页上更新。 到目前为止一切都很好，但是如果我长时间不做任何事情（大约 1 分钟），或者如果我切换应用程序（不关闭它）和 go 回到应用程序，然后在文本字段中更改任何内容，则网页是不再自动更新。

我当然可以运行webView.reload() ，但是我失去了以前的 state。 而不是Initial我得到标题。 合乎逻辑，因为这是在 h3 标签内设置的，但这是我想要避免的。

那么，无论我等待多长时间或在应用程序之间切换，我如何确保每当evaluteJavascript()时，网页也会更新而不会丢失以前的 state？ 有没有办法解决这个问题？

Answer 1

这看起来像Apple的缺陷，因为调用了updateUIView，但是evaluateJavaScript （内部JavaScript）会产生异常，因为bridge.onMessage丢失而不是function更多。

这里找到了解决方法 - 在场景激活时重置 WebView（应用程序进入前台），因为它使用当前状态重新创建，之前的值被保留。 使用 Xcode 13.2 / iOS 15.2 测试

struct DemoView: View {
    @Environment(\.scenePhase) var scenePhase

    @State private var headline: String = "Initial"
    @State private var reset = false

    var body: some View {
        NavigationView {
            VStack {
                Form {
                    TextField("Your headline", text: $headline)
                }
                WebView(headline: $headline).id(reset)     // << here !!
                    .onChange(of: scenePhase) {
                        if case .active = $0 {
                            self.reset.toggle()            // << here !!
                        }
                    }
            }
        }
    }
}