Return result from called function in iOS to calling function in WkWebView in JavaScript

Question

We called a function in iOS from javascript i.e

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

I want to assign returned value in data variable from called method in iOS.

iOS Code :

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if(message.name == "callbackHandler") {
            print("JavaScript is sending a message \(message.body)")
            how to send data back??
        }
    }

can someone please tell me how to do it??

I know I can use evaluateJavascript to call back another method but due to some restriction I have to return result from same method.

I think this is essentially a duplicate of [my question a few years ago](https://stackoverflow.com/questions/26851630/javascript-synchronous-native-communication-to-wkwebview). Unfortunately there haven't been any answers yet. — paulvs, Jul 19 '17 at 21:11

score 2 · Answer 1 · answered Jan 23 '18 at 16:06

Here is one approach:

Javascript:

function callNativeCode() {
    webkit.messageHandlers.callbackHandler.postMessage("Hello from JavaScript");
}

// this function will be later called by native code
function callNativeCodeReturn(returnedValue) {
    // do your stuff with returned value here
}

Swift:

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    if(message.name == "callbackHandler") {
        print("JavaScript is sending a message \(message.body)")
        webView.evaluateJavaScript("callNativeCodeReturn(0)")
    }
}

Of course this is not very elegant and not synchronous...

There is another approach with promises, you can find out more about it here: http://igomobile.de/2017/03/06/wkwebview-return-a-value-from-native-code-to-javascript/

Is there a way to integrate the promise uuid generator into the `Promise` class itself? Even better if done in a transparent way without having to use a different class, but rather using the same `new Promise(...)` constructor. — rraallvv, Jul 09 '18 at 01:47
It's strongly discouraged to modify the prototypes of standard JavaScript objects. But it is possible (https://www.w3schools.com/js/js_object_prototypes.asp) — ndreisg, Jul 09 '18 at 07:43

Stephen Bridgett · Answer 2 · 2021-06-05T12:18:57.977

iOS 14+ adds a "didReceive:replyHandler" parameter, which can contain a 'reply' object or an 'errorMessage'. This 'replyHandler' is effectively a formal implementation of the above 'evaluateJavaScript' async callback:

Apple documentation for WKScriptMessageHandlerWithReply interface and didReceive:replyHandler

For an example using this 'replyHandler', see this StackOverflow post: iOS 14 API WKScriptMessageHandlerWithReply

score -1 · Answer 3 · edited Jan 12 '18 at 09:17

-1

You could give the WebViewJavascriptBridge library a try and see if it fits your needs.

https://github.com/marcuswestin/WebViewJavascriptBridge.

edited Jan 12 '18 at 09:17

klugjo

16,697
7
46
64

answered Jan 11 '18 at 02:26

hstdt

4,881
1
29
33

Return result from called function in iOS to calling function in WkWebView in JavaScript

3 Answers3