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

Posted 2023-03-11

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

【英文标题】：How to search a custom text from textfield in webkit swiftUI

【发布时间】：2021-04-21 07:08:59

【问题描述】：

我正在 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")
                    
                
            
        
    
    

【参考方案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 始终接受搜索查询，但这看起来对我有用。