在WKUIDelegate SwiftUI上实现JavaScript的警告和确认框？

Question

因为我对Swift还不熟悉，所以不确定如何编写一个函数使Swift与Webapp交互并显示Javascript Alert和Confirm。我正在使用SwiftUI创建Webapp，需要实现一个函数使我的Swift Webapp能够正确显示Javascript Alert和Confirm。

以下是我目前拥有的代码：

import SwiftUI
import WebKit

struct Webview : UIViewRepresentable {
    let request: URLRequest
    var webview: WKWebView?

    init(web: WKWebView?, req: URLRequest) {
        self.webview = WKWebView()
        self.request = req
    }

    class Coordinator: NSObject, WKUIDelegate {
        var parent: Webview

        init(_ parent: Webview) {
            self.parent = parent
        }

        // Delegate methods go here

        func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
            // alert functionality goes here

        }
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

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

    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.uiDelegate = context.coordinator
        uiView.load(request)
    }

    func goBack(){
        webview?.goBack()
    }

    func goForward(){
        webview?.goForward()
    }

    func reload(){
        webview?.reload()
    }
}

struct ContentView: View {

    let webview = Webview(web: nil, req: URLRequest(url: URL(string: "https://google.com")!))

    var body: some View {
        VStack {
            webview
            HStack() {
                Button(action: {
                    self.webview.goBack()
                }){
                    Image(systemName: "chevron.left")
                }.padding(32)

                Button(action: {
                    self.webview.reload()
                }){
                    Image(systemName: "arrow.clockwise")
                }.padding(32)

                Button(action: {
                    self.webview.goForward()
                }){
                    Image(systemName: "chevron.right")
                }.padding(32)
            }.frame(height: 40)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

我该如何在上述现有代码中添加适当的功能来显示“警告”和“确认”？

- Skate to Eat

Answer 1

如果你想继续使用 UIViewRepresentable 并且使用来自 UIKit 的警告（例如 UIAlertController），而不是 SwiftUI 的 Alert：

1. 在你的Webview结构体中创建一个函数来显示一个UIKit警告：

   func showAlert(_ message: String) {
      let alertController = UIAlertController(title: "警告", message: message, preferredStyle: .alert)
      alertController.addAction(UIAlertAction(title: "确定", style: .default, handler: nil))
   
      // 你需要访问应用程序的UIWindow来呈现警告
      if let viewController = UIApplication.shared.windows.first?.rootViewController {
         viewController.present(alertController, animated: true, completion: nil)
      }
   }
   

2. 修改你的JavaScript函数，在显示警告时调用这个Swift函数：

   function showAlert(message) {
      window.webkit.messageHandlers.alertHandler.postMessage(message);
   }
   

3. 在userContentController(_:didReceive:)方法中，当你从JavaScript接收到一条消息时，调用showAlert函数：

   func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
      if message.name == "alertHandler", let messageBody = message.body as? String {
         showAlert(messageBody)
      }
   }
   

当从您的网页调用JavaScript函数showAlert(message)时，它将触发Webview结构中的showAlert函数，该函数将使用UIAlertController在您的SwiftUI应用中显示一个UIKit警报。

- gotnull