SwiftUI WKWebView自适应高度：使用WKNavigationDelegate实现内容自适应

{"title":"SwiftUI WKWebView自适应高度：使用WKNavigationDelegate实现内容自适应","description":"在SwiftUI中使用WKWebView加载HTML字符串时，如何使WKWebView高度自适应其内容？本文将通过示例代码演示如何使用WebKit的WKNavigationDelegate来监视网页加载并获取其高度，从而实现自适应功能。","keywords":"SwiftUI, WKWebView, 自适应高度, WKNavigationDelegate, HTML字符串, 内容自适应, SwiftUI WKWebView高度自适应, WKWebView自适应内容","content":"import SwiftUI\nimport WebKit\n\nstruct WebView: UIViewRepresentable {\n \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 class Coordinator: NSObject, WKNavigationDelegate {\n var parent: WebView\n \n init(_ parent: WebView) {\n self.parent = parent\n }\n \n func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {\n webView.evaluateJavaScript("document.readyState", completionHandler: { (result, error) in\n if result != nil {\n webView.evaluateJavaScript("document.documentElement.scrollHeight", completionHandler: { (height, error) in\n if let height = height as? CGFloat {\n self.parent.height = height\n }\n })\n }\n })\n }\n }\n}\n\nstruct ContentView: View {\n @State private var webViewHeight: CGFloat = 0\n \n var body: some View {\n ScrollView {\n WebView(htmlString: "

Hello, World!

")\n .frame(height: webViewHeight)\n .onReceive(Just(webViewHeight)) { height in\n DispatchQueue.main.async {\n webViewHeight = height\n }\n }\n }\n }\n}\n\n在上面的示例中，我们创建了一个名为WebView的UIViewRepresentable，它将WKWebView封装为SwiftUI视图。在makeUIView方法中，我们创建了一个WKWebView实例，并将其导航委托设置为我们的Coordinator类。在updateUIView方法中，我们使用loadHTMLString方法加载HTML字符串。Coordinator类是一个实现WKNavigationDelegate的辅助类，它将监视网页的加载并调用webView(_:didFinish:)方法当网页加载完成时。在webView(_:didFinish:)方法中，我们使用JavaScript代码来获取网页的高度，并将其赋值给parent.height属性。最后，我们在ContentView中使用ScrollView包装WebView，并将WebView的高度设置为webViewHeight，以便使其自适应内容的高度。"}