SwiftUI WKWebView 加载 HTML 字符串高度自适应最简单方法

要实现 WKWebView 加载 html 字符串的高度自适应，最简单的办法是使用 GeometryReader 来获取 WKWebView 的高度，并将高度传递给 WKWebView 的 frame。\n\n下面是一个示例代码：\n\nswift\nimport SwiftUI\nimport WebKit\n\nstruct ContentView: View {\n @State private var webViewHeight: CGFloat = .zero\n\n var body: some View {\n VStack {\n // 使用 GeometryReader 获取高度\n GeometryReader { geometry in\n // 将高度传递给 WKWebView\n WebView(htmlString: "<p>This is a test</p>")\n .frame(height: webViewHeight)\n // 在 WKWebView 加载完成后更新高度\n .onPreferenceChange(WebViewHeightKey.self) { height in\n webViewHeight = height\n }\n }\n }\n }\n}\n\n// WebView 视图\nstruct WebView: UIViewRepresentable {\n let htmlString: String\n\n func makeUIView(context: Context) -> WKWebView {\n let webView = WKWebView()\n webView.navigationDelegate = context.coordinator\n return webView\n }\n\n func updateUIView(_ uiView: WKWebView, context: Context) {\n uiView.loadHTMLString(htmlString, baseURL: nil)\n }\n\n func makeCoordinator() -> Coordinator {\n Coordinator(self)\n }\n\n // 协调器\n class Coordinator: NSObject, WKNavigationDelegate {\n let parent: WebView\n\n init(_ parent: WebView) {\n self.parent = parent\n }\n\n func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {\n // 在加载完成后计算高度并传递给父视图\n webView.evaluateJavaScript("document.readyState") { (result, error) in\n if error == nil, let readyState = result as? String, readyState == "complete" {\n webView.evaluateJavaScript("document.body.scrollHeight") { (result, error) in\n if let height = result as? CGFloat {\n parent.updateHeight(height)\n }\n }\n }\n }\n }\n }\n\n // 高度更新键\n struct WebViewHeightKey: PreferenceKey {\n static var defaultValue: CGFloat = .zero\n\n static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {\n value = nextValue()\n }\n }\n\n // 更新高度\n func updateHeight(_ height: CGFloat) {\n DispatchQueue.main.async {\n WKWebView.appearance().backgroundColor = UIColor.clear\n webViewHeight = height\n }\n }\n}\n\nstruct ContentView_Previews: PreviewProvider {\n static var previews: some View {\n ContentView()\n }\n}\n\n\n在上面的代码中，我们首先定义了一个 ContentView 视图，它包含一个 GeometryReader 来获取 WKWebView 的高度。然后，我们创建了一个 WebView 视图，它是一个 UIViewRepresentable，用于显示 WKWebView 并加载 HTML 字符串。在 WebView 中，我们使用了一个协调器来处理 WKWebView 的加载完成事件，并通过 evaluateJavaScript 方法获取 WKWebView 的内容高度。最后，我们定义了一个 WebViewHeightKey 作为 PreferenceKey，用于在 WKWebView 加载完成后将高度传递给父视图。\n\n通过上面的代码，我们就可以实现 WKWebView 加载 html 字符串的高度自适应。