Swift and Javascript Integration

Question

i was following along this article about integrating Swift (WKWebView) and Javascript. Everything from the article works fine but i am trying to pass some variable from Swift to Javascript.

This is my ViewController in Swift:

import UIKit
import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {

    @IBOutlet var containerView : UIView! = nil
    var webView: WKWebView?

    override func loadView() {
        super.loadView()

        let contentController = WKUserContentController();
        let userScript = WKUserScript(
            source: "redHeader()",
            injectionTime: WKUserScriptInjectionTime.AtDocumentEnd,
            forMainFrameOnly: true
        )
        contentController.addUserScript(userScript)
        contentController.addScriptMessageHandler(
            self,
            name: "callbackHandler"
        )

        let config = WKWebViewConfiguration()
        config.userContentController = contentController

        self.webView = WKWebView(
            frame: self.view.frame,
            configuration: config
        )
        self.view = self.webView!
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        let url = NSURL(string:"https://example.com")
        let req = NSURLRequest(URL:url!)
        self.webView!.loadRequest(req)

        let simpleInt = 123

        self.webView?.evaluateJavaScript("redHeader(\(simpleInt)", completionHandler: nil);
    }

    func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) {
        if(message.name == "callbackHandler") {
            print("JavaScript is sending a message \(message.body)")
        }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

and thats the HTML and JS residing on an server:

function callNativeApp () {
    try {
        webkit.messageHandlers.callbackHandler.postMessage("Hello from JavaScript");
    } catch(err) {
        console.log('The native context does not exist yet');
    }
}

setTimeout(function () {
    callNativeApp();
}, 50000);

function redHeader(int) {
	console.log(int);
}

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body {
                padding-top: 40px; 
            }
        </style>
        <title>WKWebView Demo</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>WKWebView Test</h1>
        <script type="text/javascript" src="main.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </body>
</html>

It's still just the code from the above article but i am not able to pass the variable simpleInt to the JS.

Despite that the Javascript call

webkit.messageHandlers.callbackHandler.postMessage("Hello from JavaScript");

does not work as well.

I think I am passing the variable wrong. Any suggestions?

Sachin · Accepted Answer · 2016-11-18 09:30:15Z

1

There are a few things you can try out

window is missing from your method call
```
webkit.messageHandlers.callbackHandler.postMessage("Hello from JavaScript");
```
should be

window.webkit.messageHandlers.callbackHandler.postMessage("Hello from JavaScript");
Check if you are able to access message handler from browser open debug menu for this Check for enabling debug mode

window.webkit.messageHandlers.callbackHandler

One more issue might be using timeout with native call. Remove timeout and add a button to call messageHandler.

answered Nov 18, 2016 at 9:30

Sachin

1031 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Swift and Javascript Integration

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related