Return data from JavaScriptHandler

[zakaryus]

Is it possible to return data from the Flutter JavaScript Handler, back to the Javascript that called it? See example below

InAppWebView(
	initialUrl: "https://flutter.io/",
	initialHeaders: {},
	initialOptions: {},
	onWebViewCreated: (InAppWebViewController controller) {
	  webView = controller;

          // Add a Flutter JavaScript Handler that will return data to the JavaScript that called it
	  webView.addJavaScriptHandler('test', (arguments) async {
		return '${arguments[0]}, Text from Flutter';
	  });
	},
	onLoadStart: (InAppWebViewController controller, String url) {
	  print("started $url");
	  setState(() {
		this.url = url;
	  });
	},
	onLoadStop: (InAppWebViewController controller, String url) {

          // Inject JavaScript that will receive data back from Flutter
	  webView.injectScriptCode("""
		var response = window.flutter_inappbrowser.callHandler('test', 'Text from Javascript');
		console.log(response); // should log 'Text from Javascript, Text from Flutter', instead logs 'undefined'
	  """);
	},
	onProgressChanged:
		(InAppWebViewController controller, int progress) {
	  setState(() {
		this.progress = progress / 100;
	  });
	},
	onConsoleMessage: (InAppWebViewController controller, ConsoleMessage consoleMessage) {

          // Log the response of the injected JavaScript
	  print('-----------------------${consoleMessage.message}-----------------------');
	},
)

I tried messing around a bit with the example to get it to work, but was ultimately unable to do so. I had to update the JavaScriptHandlerCallback to return a Future<dynamic> and change the JavaScriptBridgeInterface._callHandler to return a String, but that still didn't solve it. The main issue seemed to be that there can be a third parameter for invokeMethod("onCallJsHandler", ...) that could get the response from Flutter, but because it is asynchronous the javascript code is no longer waiting around for a response.

I don't know enough about how Flutter's MethodCall works for getting data to and from native code.

Any help would be greatly appreciated. Thanks!

[pichillilorenzo]

Feature added now on the new version 1.1.0.
Inside an html file, you may want use this:

<script>
        // you need to wait and listen the JavaScript event flutterInAppBrowserPlatformReady
        window.addEventListener("flutterInAppBrowserPlatformReady", function(event) {
            console.log("ready");
            // then you can call the window.flutter_inappbrowser.callHandler() method.
            // callHandler() returns a Promise that you can use to get data from Dart side.
            window.flutter_inappbrowser.callHandler('handlerFoo').then(function(result) {
                console.log(result, typeof result);
                console.log(JSON.stringify(result), result.bar);
            });

            window.flutter_inappbrowser.callHandler('handlerFooWithArgs', 1, true, ['bar', 5], {foo: 'baz'}).then(function(result) {
                console.log(result, typeof result);
                console.log(JSON.stringify(result));
            });
        });
</script>

Instead, on the onLoadStop Dart event, you can use callHandler directly:

// Inject JavaScript that will receive data back from Flutter
webView.injectScriptCode("""
  window.flutter_inappbrowser.callHandler('test', 'Text from Javascript').then(function(result) {
    console.log(result);
  });
""");

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug and a minimal reproduction of the issue.