How to call a function inside WebView from the menu bar item in SwiftUI?

Question

so I'll keep it short. I have the following function inside my WKNavigationDelegate:

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    
    DispatchQueue.main.asyncAfter(deadline: .now() + 7.5) {

        webView.evaluateJavaScript("document.getElementById('notes').innerHTML") { [self] (string, error) in
            print(string)
       writeFile(outputFile: "yourfile.doc", stringData: string as! String)
    }}
    
    func writeFile(outputFile:String, stringData: String){
        
        let savePanel = NSSavePanel()
           savePanel.allowedFileTypes = ["doc"]
           savePanel.canCreateDirectories = true
           savePanel.isExtensionHidden = false
         
           
           // Present the save panel as a modal window.
           let response = savePanel.runModal()
           guard response == .OK, let saveURL = savePanel.url else { return }
        
        guard let data = stringData.data(using: .utf8) else{
            print("unable to convert string to data")
            return
        }
        
           try? data.write(to: saveURL)
        
    }
    

}

However I don't wanna call this function automatically through DispatchQueue (I just tried that for testing purposes to see if my function works or not). I want to call this entire function though a menu bar items that I have listed as follows:

   var body: some Scene {
      WindowGroup {
        ContentView()
        
    
        }.windowStyle(HiddenTitleBarWindowStyle())
        .commands {
              CommandMenu("Export") {
                Button("Export as Doc") {
      \\ I WANNA CALL IT HERE
                    print("You Export as Doc") }

                  
              }
            
            }

So can anyone help me with how to call a function inside web view through menu bar? I know it might sound like a trivial question because it comes down to basic swift operations but I'm still relatively new to SwiftUI and learning every single day. Thanks in advance!

EDIT: Content View code as follow:

struct ContentView: View {
  private var url: URL? = URL(string
   "https://mywebsite.com/")

  init() {
 print("Hello World")
   }

   var body: some View {  
WebView(data: WebViewData(url: self.url!))
      .frame(minWidth: 1400, idealWidth: 1500, minHeight: 850,   idealHeight: 850)
  
     }

     }

PS: This is a macOS app btw if it's not clear already.

Do you have single-window app, or multi-document app? Ie. is it possible that it will be many windows with many web views? — Asperi, Aug 08 '22 at 04:47
There’s only one web view, @Asperi. The user will be going through various webpages inside that web view though. But no, there won’t be multiple instances of a web view at once in the app. Does that help? — alex, Aug 08 '22 at 04:56

score 1 · Answer 1 · answered Aug 08 '22 at 05:28

A possible approach is to use responder chain (because WKWebView is-a NSView on macOS and so is-a NSResponder), so action sent from main menu goes down to responder chain till some responder handles it.

I cannot test your code part with your loaded page, but at least can guaranty that action is called and you get control there.

Tested with Xcode 14 / macOS 12.5

menu command just send action in responder chain

 Button("Export as Doc") {
    print("You Export as Doc")

    // selector can be declared in NSObject extension and
    // overridden in WKWebView, but here is direct for simplicity
    NSApp.sendAction(#selector(WKWebView.export(_:)), to: nil, from: nil)
 }

implement support of action in WKWebView extension

extension WKWebView {
    @objc func export(_ sender: Any) {
        self.evaluateJavaScript("document.getElementById('notes').innerHTML") { [self] (string, error) in
            print(string)
            writeFile(outputFile: "yourfile.doc", stringData: string as! String)
        }
    }

    func writeFile(outputFile:String, stringData: String) {
      // other code ...
    }
}

*assuming menu validation and export code is out of scope

I think I should've clarified. My menu bar items are added in my main 'Your_App' file since that is where content view is loaded from. And my WebView function is in a different file which is called inside Content View. I updated my code to show that. :) — alex, Aug 08 '22 at 11:24
Files does not matter, I just copied your button from CommandMenu, to have less unrelated code. But yes it was tested from command menu. And I have feeling that you did not even try it. — Asperi, Aug 08 '22 at 11:26

How to call a function inside WebView from the menu bar item in SwiftUI?

1 Answers1