Invoke a swift function from WKWebView

Question

I am rendering a webpage in WKWebView, and in that webpage, i need to override one button action with a native swift code.Like in webpage on click of a button it navigates to another page, but in mobile, I need a storyboard to be displayed. I am not getting any direct links to implement this. below is the code sample i tried:

let webConfiguration = WKWebViewConfiguration()
let userController = WKUserContentController()

    userController.add(self, name: "performClick")

    webConfiguration.userContentController = userController

    webView = WKWebView(frame: .zero, configuration: webConfiguration)

    webView.uiDelegate = self

    webView.navigationDelegate = self

    view = webView

Does this answer your question? [Call a swift function from java script that returns a value using wk webview](https://stackoverflow.com/questions/39632957/call-a-swift-function-from-java-script-that-returns-a-value-using-wk-webview) — gcharita, Dec 22 '20 at 14:15

score 1 · Answer 1 · answered Dec 22 '20 at 06:24

You can override decidePolicyFor, which is a delegate method of WKNavigationDelegate:

override func webView(_ webView: WKWebView, 
    decidePolicyFor navigationAction: WKNavigationAction, 
    decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    if <navigationAction is the button press> {
        decisionHandler(.cancel)
         // go to the new storyboard
    } else {
        decisionHandler(.allow)
    }
}

To decide whether navigationAction is the button press, you can inspect its request property, which is a URLRequest. You should know what URLRequest the button sends.

Thankyou... Comparing the navigation action URL worked for me let url = navigationAction.request.url! if url.absoluteString.contains("https://.....") {} — Tinjzz, Jan 07 '21 at 09:25

score 0 · Answer 2 · answered Dec 22 '20 at 06:32

You are missing some part, To listen message from web page you need to make some changes in your web page also. Here are the step to listen some action from webpage, my code snippet are in objective c, you can translate to swift

Add your script message using addScriptMessageHandler function, it will take param WKScriptMessageHandler and message name, for test use message name like, "test"

implement didReceiveScriptMessage delegate.

- (void)didReceiveScriptMessage:(WKScriptMessage*)message {
     if ([message.name isEqualToString: @"test"]) {
        //Do here whatever you want.
     }
}

On your server page whenever that button pressed call this line.

webkit.messageHandlers.test

I have this already but didReceiveScriptMessage never gets invoked — Tinjzz, Dec 22 '20 at 09:07
did you perform step 3- On your server page whenever that button pressed call this line. — Muhammad Shauket, Dec 22 '20 at 09:10

score 0 · Accepted Answer · answered Jan 14 '21 at 09:02

After a lot of search, I finally got the answer. Posting this if this helps someone.

var webView: WKWebView?
var webConfig:WKWebViewConfiguration {
    get {

        let webCfg:WKWebViewConfiguration = WKWebViewConfiguration()
        let userController:WKUserContentController = WKUserContentController()
        userController.add(self, name: "submit")
        let js:String = buttonClickEventTriggered()
        let userScript:WKUserScript =  WKUserScript(source: js, injectionTime: WKUserScriptInjectionTime.atDocumentEnd, forMainFrameOnly: false)
        userController.addUserScript(userScript)
        webCfg.userContentController = userController;
        return webCfg;
    }
}
  override func viewDidLoad() {
    super.viewDidLoad()
    self.webView = WKWebView(frame: self.view.frame, configuration: webConfig)
    self.webView!.navigationDelegate = self
    self.view = webView!
    let url = URL(string:"your URL here")
    let req = NSURLRequest(url:url! as URL)
    self.webView!.load(req as URLRequest)
 }
func buttonClickEventTriggered() ->String{
    
    let script:String = "document.getElementById('your button id here').addEventListener('click', function () {window.webkit.messageHandlers.submit.postMessage('submited');});"//Make sure you have mapped the name correctly under userController.add
    return script;
}
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    print("Sucessss")
    if(message.name == "submit") {
        print("It does ! \(message.body)")
        // Your code goes here
    }
}

Invoke a swift function from WKWebView

3 Answers3