Hi i want to ask so i have a problem in WKWebView IOS

So i want to post message to JS like this

 window.webkit.messageHandlers.postMessageListener.postMessage(JSON.stringify({data}))

but nothing happened in JS

otherwise in android

"window.postMessage(JSON.stringify({data}))"

just like this and the JS Give response for this

Now i want to ask whats wrong with my script ?

sorry for bad english grammar

Hi i want to ask so i have a problem in WKWebView IOS

So i want to post message to JS like this

 window.webkit.messageHandlers.postMessageListener.postMessage(JSON.stringify({data}))

but nothing happened in JS

otherwise in android

"window.postMessage(JSON.stringify({data}))"

just like this and the JS Give response for this

Now i want to ask whats wrong with my script ?

sorry for bad english grammar

• javascript
• ios
• swift
• wkwebview

2 Answers 2

For a simple explanation, you can check this article:

https://medium./@hoishing/using-javascript-with-wkwebview-64f94153ad0

If you want a more deep explanation, you can check this other article:

https://dev.to/gualtierofr/wkwebview-and-javascript-interaction-1pbl

In both they mention how Triggering Javascript Functions from Swift AND Receiving Javascript Messages

Anyway, if you execute this function in JavaScript:

window.webkit.messageHandlers.postMessageListener.postMessage(JSON.stringify({data}))

You must listening in Swift the name postMessageListener in this way:

Setup the WKWebView

let preferences = WKPreferences()
preferences.javaScriptEnabled = true
let configuration = WKWebViewConfiguration()
configuration.preferences = preferences

// Here I am guessing that the Frame of the WebView is the entire Screen
let webView = WKWebView(frame: view.frame, configuration: configuration)


configuration.userContentController.add(self, name: "postMessageListener")

Conforming the Protocol WKScriptMessageHandler

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
   if message.name == "postMessageListener" {
       // Manage your Data
   }
}

Sending Data from WKWebview's webpage to native code using postMessage handler,

import UIKit
import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {

    lazy var webView: WKWebView = {
        let   webCfg:WKWebViewConfiguration = WKWebViewConfiguration()

        // Setup WKUserContentController instance for injecting user script
        var userController:WKUserContentController = WKUserContentController()

        // Add a script message handler for receiving  "buttonClicked" event notifications posted from the JS document using  window.webkit.messageHandlers.postMessageListener.postMessage(JSON.stringify({data})) script message
        userController.add(self, name: "nativeListener")
        // Configure the WKWebViewConfiguration instance with the WKUserContentController
        webCfg.userContentController = userController;

        let webView = WKWebView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height), configuration: webCfg)
        return webView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        webView.configuration.preferences.javaScriptEnabled = true
        self.view.addSubview(webView)
        let urlToLoad  = URL(string: "your_url_string")
        // Do any additional setup after loading the view.
        webView.load(URLRequest(url:urlToLoad!))
    }


    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
     if message.name == "nativeListener" {
          print(message.body) // prints the data that is sent from javascript
       }
    }
}