如何从 webkit swiftUI 中的文本字段中搜索自定义文本

Question

我正在 swift ui 中构建一个小型浏览器我已经构建了一个结构来表示 wkwebview，我想在文本字段中输入任何文本并使用 wkwebview 和谷歌查询在互联网上搜索我试图重新实例化 Webview(web: nil, req: URLRequest(url: URL(string: searchText)!))但它不适合我？我怎么能做到这一点我对 SwiftUI 很陌生。请帮忙？

struct Webview : UIViewRepresentable {
    let request: URLRequest
    var webview: WKWebView?
    
    init(web: WKWebView?, req: URLRequest) {
        self.webview = WKWebView()
        self.request = req
    }
    
    func makeUIView(context: Context) -> WKWebView  {
        return webview!
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.load(request)
    }
    
    func goBack(){
        webview?.goBack()
    }
    
    func goForward(){
        webview?.goForward()
    }
    func refresh(){
        webview?.reload()
    }
}


import SwiftUI

struct ContentView: View {
    var webview = Webview(web: nil, req: URLRequest(url: URL(string: "https://www.apple.com")!))
    @State private var searchText = ""
    @State private var txt = ""
    
    var body: some View {
        ZStack {
            
            HStack {
                TextField("Search", text: $searchText,onCommit: {

     
                   print(searchText) 
                }
                
                )
                .keyboardType(.URL)
                .frame(width: UIScreen.main.bounds.size.width * 0.75 )
                
                
                
            }
         
            
        }
        webview
            
            
            .toolbar {
                ToolbarItemGroup(placement: .bottomBar) {
                    
                    Button(action: {
                        webview.goBack()
                    }) {
                        Image(systemName: "arrow.left")
                    }
                    Spacer()
                    
                    Button(action: {
                        webview.goForward()
                        
                    }) {
                        Image(systemName: "arrow.right")
                    }
                    
                    Spacer()
                    
                    Button(action: {
                        webview.refresh()
                    }) {
                        Image(systemName: "arrow.clockwise")
                    }
                }
            }
        
    }
    
}

Answer 1

您现在设置的方式（尝试存储对 UIViewRepresentable 的引用）会在以后导致问题（实际上就像这样）。

我建议您设置某种临时对象，可用于存储数据并与WKWebView 进行命令式通信，同时仍保留以声明方式进行布局的能力。在我的示例中，WebVewManager 是父视图和 UIViewRepresentable 都可以访问的临时对象：

class WebViewManager : ObservableObject {
    var webview: WKWebView = WKWebView()
    
    init() {
        webview.load(URLRequest(url: URL(string: "https://apple.com")!))
    }
    
    func searchFor(searchText: String) {
        if let searchTextNormalized = searchText.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed),
           let url = URL(string: "https://google.com/search?q=\(searchTextNormalized)") {                        self.loadRequest(request: URLRequest(url: url))
        }
    }
    
    func loadRequest(request: URLRequest) {
        webview.load(request)
    }
    
    func goBack(){
        webview.goBack()
    }
    
    func goForward(){
        webview.goForward()
    }
    
    func refresh(){
        webview.reload()
    }
}

struct Webview : UIViewRepresentable {
    var manager : WebViewManager
    
    init(manager: WebViewManager) {
        self.manager = manager
    }
    
    func makeUIView(context: Context) -> WKWebView  {
        return manager.webview
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        
    }
}


struct ContentView: View {
    @StateObject private var manager = WebViewManager()
    @State private var searchText = ""
    @State private var txt = ""
    
    var body: some View {
        ZStack {
            HStack {
                TextField("Search", text: $searchText,onCommit: {
                    print(searchText)
                    manager.searchFor(searchText: searchText)
                })
                .keyboardType(.URL)
                .frame(width: UIScreen.main.bounds.size.width * 0.75 )
            }
        }
        Webview(manager: manager)
            .toolbar {
                ToolbarItemGroup(placement: .bottomBar) {
                    
                    Button(action: {
                        manager.goBack()
                    }) {
                        Image(systemName: "arrow.left")
                    }
                    Spacer()
                    
                    Button(action: {
                        manager.goForward()
                        
                    }) {
                        Image(systemName: "arrow.right")
                    }
                    
                    Spacer()
                    
                    Button(action: {
                        manager.refresh()
                    }) {
                        Image(systemName: "arrow.clockwise")
                    }
                }
            }
    }
}

我正在对搜索字符串进行一些简单的百分比编码——您可能需要进行更多测试以确保 google 始终接受搜索查询，但这看起来对我有用。