如何让 SwiftUI WebView 动态加载 URL？答案

【问题标题】：How to make SwiftUI WebView dynamically load an URL?如何让 SwiftUI WebView 动态加载 URL？
【发布时间】：2021-11-04 16:20:49
【问题描述】：

我添加了这段代码以便能够在 SwiftUI 中使用 WebView：

extension WKWebView {
    func load(_ urlString: String) {
        if let url = URL(string: urlString) {
            let request = URLRequest(url: url)
            load(request)
        }
    }
}

struct WebView : UIViewRepresentable {
    @State var url: String
    
    func makeUIView(context: Context) -> WKWebView  {
        return WKWebView()
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.load(url)
    }
}

但是，当单击按钮时，我需要导航到 URL。

struct ContentView: View {
    @State private var showLoginForm: Bool = true
    ...    
    var webView = WebView(url: "https://www.google.com")
    ...
    var body: some View {
        if showLoginForm {
            ...
            Button(action: {
                showLoginForm = false
                webView.url = "https://www.example.com/go/1"
            }) { ... }
        } else {
            webView
        }
    }
}

但webView 停留在初始页面上

【问题讨论】：

下一步应该会有所帮助stackoverflow.com/a/61059318/12299030, stackoverflow.com/a/65465719/12299030, stackoverflow.com/a/63071151/12299030 .. 只需通过WKWebView 在这里搜索更多内容

标签： swift swiftui webview

【解决方案1】：

由于您需要在 webview 之外更改 URL，因此您不要在 webview 本身内部创建 @State。请记住，状态意味着它是真相的来源，通常它必须标记为private。

所以@State 并不是要从外部更改。

此外，通过webView.url = "https://www.example.com/go/1" 更改网址不会重新呈现。

我会将您的实现更改为类似

extension WKWebView {
    func load(_ urlString: String) {
        if let url = URL(string: urlString) {
            let request = URLRequest(url: url)
            load(request)
        }
    }
}

struct WebView : UIViewRepresentable {
    var url: String

    func makeUIView(context: Context) -> WKWebView  {
        return WKWebView()
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.load(url)
    }
}

struct ContentView: View {
    @State private var showLoginForm: Bool = true
    @State private var url = "https://www.google.com"

    var body: some View {
        if showLoginForm {
            Button(action: {
                showLoginForm = false
                url = "https://www.example.com/go/1"
            }) { Text("Try!") }
        } else {
            WebView(url: url)
        }
    }
}

如您所见，url 现在属于可以更改它的视图。更改该值，将重新呈现现在具有正确 url 的 webview。

【讨论】：