addJavaScriptHandler method

void addJavaScriptHandler({ required String handlerName, required JavaScriptHandlerCallback callback, })

Adds a JavaScript message handler callback (JavaScriptHandlerCallback) that listen to post messages sent from JavaScript by the handler with name handlerName.

The Android implementation uses addJavascriptInterface. The iOS implementation uses addScriptMessageHandler

The JavaScript function that can be used to call the handler is window.flutter_inappwebview.callHandler(handlerName <String>, ...args), where args are rest parameters. The args will be stringified automatically using JSON.stringify(args) method and then they will be decoded on the Dart side.

In order to call window.flutter_inappwebview.callHandler(handlerName <String>, ...args) properly, you need to wait and listen the JavaScript event flutterInAppWebViewPlatformReady. This event will be dispatched as soon as the platform (Android or iOS) is ready to handle the callHandler method.

  window.addEventListener("flutterInAppWebViewPlatformReady", function(event) {
    console.log("ready");
  });

window.flutter_inappwebview.callHandler returns a JavaScript Promise that can be used to get the json result returned by JavaScriptHandlerCallback. In this case, simply return data that you want to send and it will be automatically json encoded using jsonEncode from the dart:convert library.

So, on the JavaScript side, to get data coming from the Dart side, you will use:

<script>
  window.addEventListener("flutterInAppWebViewPlatformReady", function(event) {
    window.flutter_inappwebview.callHandler('handlerFoo').then(function(result) {
      console.log(result);
    });

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

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

 // Inject JavaScript that will receive data back from Flutter
 inAppWebViewController.evaluateJavascript(source: """
   window.flutter_inappwebview.callHandler('test', 'Text from Javascript').then(function(result) {
     console.log(result);
   });
 """);

Forbidden names for JavaScript handlers are defined in _JAVASCRIPT_HANDLER_FORBIDDEN_NAMES.

NOTE: This method should be called, for example, in the WebView.onWebViewCreated or WebView.onLoadStart events or, at least, before you know that your JavaScript code will call the window.flutter_inappwebview.callHandler method, otherwise you won't be able to intercept the JavaScript message.

Supported Platforms/Implementations:

• Android native WebView
• iOS

Implementation

void addJavaScriptHandler(
    {required String handlerName,
    required JavaScriptHandlerCallback callback}) {
  assert(!_JAVASCRIPT_HANDLER_FORBIDDEN_NAMES.contains(handlerName),
      '"$handlerName" is a forbidden name!');
  this.javaScriptHandlersMap[handlerName] = (callback);
}