[InAppWebview]: window.flutter_inappwebview.callHandler is not a function #218

OPY-bbt · 2019-12-11T15:43:08Z

Environment

Flutter version: 1.10.15
Plugin version: ^2.1.0+1
Android version: 9
iOS version:
Xcode version:
Device information:

Description

I use demo to load url, but get javascript error when click div.
I/flutter (27593): Uncaught TypeError: window.flutter_inappwebview.callHandler is not a function

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>click</div>
    <script>
        window.addEventListener("flutterInAppWebViewPlatformReady", function(event) {
            console.log("ready");

            var div = document.body.querySelector('div');
            div.addEventListener('click', function() {
                window.flutter_inappwebview.callHandler('handleData', 1, true, ['bar', 5], {foo: 'baz'});
            });
        });
    </script>
</body>
</html>

onLoadStop:
    (InAppWebViewController controller, String url) async {
  setState(() {
    this.url = url;
  });

  webView.addJavaScriptHandler(
      handlerName: 'handleData',
      callback: (args) {
        print(args);
      });
},

The text was updated successfully, but these errors were encountered:

OPY-bbt · 2019-12-12T01:55:09Z

ositano · 2019-12-13T01:15:37Z

I get this error TypeError: undefined is not an object (evaluating 'window.flutter_inappbrowser.callHandler') on running the below example

  import 'dart:async';
  import 'package:flutter/material.dart';
  import 'package:flutter_inappwebview/flutter_inappwebview.dart';

  Future main() async {
     runApp(new MyApp());
  }

  class MyApp extends StatefulWidget {
 @override
   _MyAppState createState() => new _MyAppState();
 }

class _MyAppState extends State<MyApp> {
      InAppWebViewController webView;
    String url = "";
   double progress = 0;

    @override
    void initState() {
       super.initState();
    }

    @override
     void dispose() {
        super.dispose();
    }

    @override
    Widget build(BuildContext context) {
         return MaterialApp(
             home: Scaffold(
             appBar: AppBar(
             title: const Text('InAppWebView Example'),
            ),
           body: Container(
               child: Column(children: <Widget>[
              Container(
              padding: EdgeInsets.all(20.0),
               child: Text(
                   "CURRENT URL\n${(url.length > 50) ? url.substring(0, 50) + "..." : url}"),
               ),
              Container(
                   padding: EdgeInsets.all(10.0),
                   child: progress < 1.0
                     ? LinearProgressIndicator(value: progress)
                     : Container()),
      Expanded(
        child: Container(
          margin: const EdgeInsets.all(10.0),
          decoration:
              BoxDecoration(border: Border.all(color: Colors.blueAccent)),
          child: InAppWebView(
            initialUrl: "https://flutter.dev/",
            initialHeaders: {},
            initialOptions: InAppWebViewWidgetOptions(
                inAppWebViewOptions: InAppWebViewOptions(
              debuggingEnabled: true,
              javaScriptEnabled: true,
              useShouldOverrideUrlLoading: true,
              useOnLoadResource: true,
              cacheEnabled: true,
            )),
            onWebViewCreated: (InAppWebViewController controller) {
              webView = controller;
              webView.addJavaScriptHandler(
                  handlerName: "test",
                  callback: (arguments) async {
                    print('hello from test');
                    print(arguments.length);
                    print(arguments);
                  });
            },
            onLoadStart: (InAppWebViewController controller, String url) {
              setState(() {
                this.url = url;
              });
            },
            onLoadStop:
                (InAppWebViewController controller, String url) async {
              setState(() {
                this.url = url;
              });

              String js2 = "window.flutter_inappwebview.callHandler('test', 'Text from Javascript').then(function(result) {console.log(result);})";
              await controller.evaluateJavascript(source: js2);
            },
            onProgressChanged:
                (InAppWebViewController controller, int progress) {
              setState(() {
                this.progress = progress / 100;
              });
            },
            onConsoleMessage: (InAppWebViewController controller,
                ConsoleMessage consoleMessage) {
              print("""
                          console output:

                            message: ${consoleMessage.message}
                            messageLevel: ${consoleMessage.messageLevel}
                          """);
            }, //fires when browser receives console message
          ),
        ),
      ),
      ButtonBar(
        alignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
            child: Icon(Icons.arrow_back),
            onPressed: () {
              if (webView != null) {
                webView.goBack();
              }
            },
          ),
          RaisedButton(
            child: Icon(Icons.arrow_forward),
            onPressed: () {
              if (webView != null) {
                webView.goForward();
              }
            },
          ),
          RaisedButton(
            child: Icon(Icons.refresh),
            onPressed: () {
              if (webView != null) {
                webView.reload();
              }
            },
          ),
        ],
      ),
    ])),
  ),
);
  }
 }

pichillilorenzo · 2019-12-13T01:29:36Z

@ositano that's because it is not window.flutter_inappbrowser, but it needs to be window.flutter_inappwebview

OPY-bbt · 2019-12-13T01:58:21Z

#204

ositano · 2019-12-13T05:30:00Z

@ositano that's because it is not window.flutter_inappbrowser, but it needs to be window.flutter_inappwebview

@pichillilorenzo thank you, I have changed it as you pointed, but now it crashes the app. I am running on iOS simulator. When i tried running using _callHandler as mentioned on the issue @OPY-bbt referenced I get TypeError: window.flutter_inappwebview._callHandler is not a function

pichillilorenzo · 2019-12-13T07:20:02Z

_callHandler should not be used because it is a "private API" that I use to manage javascript handlers. callHandler is the public one that you need to use. I need to debug it more.

pichillilorenzo · 2019-12-13T07:29:51Z

@ositano please post the error log you get! For iOS, open launch your app with Xcode and take the logs from it

ositano · 2019-12-13T08:35:33Z

@pichillilorenzo i was unable to run from xcode

pichillilorenzo · 2019-12-13T09:06:50Z

@ositano thats because you are using an Xcode version below 11. This plugin, as written in the Requirements section of the README.md file and in the official documantation, requires Xcode >= 11. Just update Xcode and it should work.

ositano · 2019-12-13T10:57:43Z

@pichillilorenzo see this

OPY-bbt · 2019-12-14T01:26:41Z

@ositano Please create a new issue. Don't ask questions that are irrelevant to the title

koteezy · 2019-12-17T10:41:39Z

flutterInAppWebViewPlatformReady - is never called, my js:

console.log("JS injected");

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

    const tracks = [1,2,3,4];

    window.flutter_inappwebview.callHandler('tracks', JSON.stringify({ tracks: tracks }));
  });

shaiful-hisham · 2019-12-24T12:22:33Z

I also have the same issue in Android, but in iOS it working fine. Do we have any workaround yet?

eryanwcp · 2019-12-30T06:02:38Z

it's not working in Android 9-，but in Android 10 and iOS it working fine.

koteezy · 2020-01-12T13:16:40Z

Any news?

fuiyu · 2020-02-10T16:37:14Z

Looking for help for this problem, Android 8 is not working

a4081675 · 2020-02-13T11:05:34Z

求解决。。。官方不支持选择文件，这个还有不少bug。心好累。。。。

a4081675 · 2020-02-14T03:56:59Z

String js = InAppWebView.consoleLogJS.replaceAll("[\r\n]+", "");
js += JavaScriptBridgeInterface.flutterInAppBroserJSClass.replaceAll("[\r\n]+", "");
if (webView.options.useShouldInterceptAjaxRequest) {
js += InAppWebView.interceptAjaxRequestsJS.replaceAll("[\r\n]+", "");
}
if (webView.options.useShouldInterceptFetchRequest) {
js += InAppWebView.interceptFetchRequestsJS.replaceAll("[\r\n]+", "");
}
if (webView.options.useOnLoadResource) {
js += InAppWebView.resourceObserverJS.replaceAll("[\r\n]+", "");
}
js += InAppWebView.printJS.replaceAll("[\r\n]+", "");

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
  webView.evaluateJavascript(js, (ValueCallback<String>) null);
} else {
  webView.loadUrl("javascript:" + js);
}

换到onPageFinished里面就好使了

hisaichi5518 · 2020-02-17T06:00:52Z

my workaround:

const message = "value";
if (window.flutter_inappwebview.callHandler) {
  window.flutter_inappwebview.callHandler('handlerName', message);
} else {
   window.flutter_inappwebview._callHandler('handlerName', setTimeout(function(){}), JSON.stringify([message]));
}

asjqkkkk · 2020-03-04T11:31:00Z

I have the same issue.
and console logs:

[ERROR:interface_registry.cc(104)] Failed to locate a binder for interface: autofill::mojom::PasswordManagerDriver

Maybe this is the problem

hisaichi5518 · 2020-03-15T12:03:17Z

The cause of this issue is that only onPageStarted callback sets callHandler JS.
If you set the callHandler JS in onPageFinished, no problem will occur.

diff --git a/android/src/main/java/com/pichillilorenzo/flutter_inappwebview/InAppWebView/InAppWebViewClient.java b/android/src/main/java/com/pichillilorenzo/flutter_inappwebview/InAppWebView/InAppWebViewClient.java
index 84ad883..3276175 100644
--- a/android/src/main/java/com/pichillilorenzo/flutter_inappwebview/InAppWebView/InAppWebViewClient.java
+++ b/android/src/main/java/com/pichillilorenzo/flutter_inappwebview/InAppWebView/InAppWebViewClient.java
@@ -223,7 +223,8 @@ public class InAppWebViewClient extends WebViewClient {
     view.clearFocus();
     view.requestFocus();

-    String js = InAppWebView.platformReadyJS.replaceAll("[\r\n]+", "");
+    String js = JavaScriptBridgeInterface.flutterInAppBroserJSClass.replaceAll("[\r\n]+", "");
+    js += InAppWebView.platformReadyJS.replaceAll("[\r\n]+", "");

     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
       webView.evaluateJavascript(js, (ValueCallback<String>) null);

mrcrixx · 2020-07-14T16:37:04Z

I have tried everything but I'm still stucked on the original problem: callHandler is not a function...

on Dart side I use this that should inject the handler

onWebViewCreated: (InAppWebViewController controller) {
webView = controller;
webView.addJavaScriptHandler(
handlerName: "mySum",
callback: (args) {
// Here you receive all the arguments from the JavaScript side
// that is a List
print("From the JavaScript side:");
print(args);
return args.reduce((curr, next) => curr + next);
});

},

on HTML side I use this and I get the error:

    <script>
       // 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('Here I am, I get this message');
      
				             // call flutter handler with name 'mySum' and pass one or more arguments
				             window.flutter_inappwebview.callHandler('mySum', 12, 2, 50).then(function(result) {
				               // get result from Flutter side. It will be the number 64.
				               console.log(result);
				             });
       	
       });
    </script>

Just an example

Any idea?

letyletylety · 2020-08-05T08:12:29Z

anyone solved this?

WangPe1n · 2020-08-10T02:15:23Z

I solved this issue by adding these code:

...
String _js = '''
  if (!window.flutter_inappwebview.callHandler) {
      window.flutter_inappwebview.callHandler = function () {
          var _callHandlerID = setTimeout(function () { });
          window.flutter_inappwebview._callHandler(arguments[0], _callHandlerID, JSON.stringify(Array.prototype.slice.call(arguments, 1)));
          return new Promise(function (resolve, reject) {
              window.flutter_inappwebview[_callHandlerID] = resolve;
          });
      };
  }
  ''';
...

InAppWebView(
...
  onWebViewCreated: (controller) {
    controller.addJavaScriptHandler(
      ...
    );
  },
  onLoadStop: (controller, url) {
    controller.evaluateJavascript(source: _js);
  },
...
);

hope this help. 😁

WangPe1n · 2020-08-10T02:18:57Z

anyone solved this?

here

JanusKun · 2020-08-13T08:54:51Z

how can i solve it? head big

Clean-Cole · 2020-08-18T16:21:49Z

Confirmed @WangPe1n 's fix did the trick.

checkblue · 2020-08-28T10:18:15Z

@WangPe1n Your code is valid！！！

rajashah33 · 2020-09-23T12:38:41Z

@WangPe1n workaround not working. I'm still getting the same error

DRL9 · 2020-12-11T13:26:49Z

@WangPe1n workaround not working. I'm still getting the same error

@rajashah33 Copy that js fragment to js file can resolve it.

cijianzy · 2021-03-07T12:07:43Z

@WangPe1n you save me!!!

pichillilorenzo · 2021-03-07T16:29:39Z

@cijianzy it should already work with the latest version without any workaround

kiwiidb · 2021-04-28T09:54:29Z

I am using

version ^5.3.2
classpath 'com.android.tools.build:gradle:3.5.4'

    compileSdkVersion 30

    sourceSets {
        main.java.srcDirs += 'src/main/kotlin'
    }

    lintOptions {
        disable 'InvalidPackage'
    }

    defaultConfig {
        minSdkVersion 17
        targetSdkVersion 30
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

and I only got the callback it to work when using @WangPe1n 's workaround. Worked on ios but did not work on android except with this workaround.

pichillilorenzo · 2021-04-28T10:02:48Z

@kiwiidb if you have problems, please post a new issue with a code example to be able to reproduce that behavior. It should already work with version 5+.
Using that workaround could not work on future versions. It is something "private" and it could change at any time. So, open a new issue and post your problem there with all the info.
Also, be sure to read how JavaScript Communication works and check if you are following the right steps.

maxmitz · 2023-05-26T12:20:08Z

This bug still occurs for me. I'm going to post a new issue in the next few days.

codemobiles · 2024-07-06T16:05:16Z

You can use this code to prevent the crash error in the javascript level. I add try-catch to prevent the crash and allow flutter handle the exception itself.

`String _js = '''
(function() {
try {
return $fullMethodSignature;
} catch (e) {
return "failed";
}
})();
''';

result = await webController.evaluateJavascript(source: _js) ?? "failed";
`

github-actions · 2024-10-03T00:22:51Z

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.

OPY-bbt changed the title ~~[inAppWebview]: window.flutter_inappwebview.callHandler is not a function~~ [InAppWebview]: window.flutter_inappwebview.callHandler is not a function Dec 11, 2019

pichillilorenzo mentioned this issue Dec 17, 2019

flutter_inappwebview.callHandler is not a function #230

Closed

koteezy mentioned this issue Dec 17, 2019

App crashed on iOS - Lost connection to device #174

Closed

This was referenced Jul 6, 2020

Unable to open Webview #439

Closed

Unable to open Webview #440

Closed

pichillilorenzo closed this as completed in 3c4bbd6 Aug 27, 2020

sharon-atim mentioned this issue Nov 21, 2023

window.flutter_inappwebview.callHandler is not a function #1877

Open

2 tasks

github-actions bot locked as resolved and limited conversation to collaborators Oct 3, 2024

[InAppWebview]: window.flutter_inappwebview.callHandler is not a function #218

[InAppWebview]: window.flutter_inappwebview.callHandler is not a function #218

Comments

OPY-bbt commented Dec 11, 2019

Environment

Description

OPY-bbt commented Dec 12, 2019

ositano commented Dec 13, 2019 • edited Loading

pichillilorenzo commented Dec 13, 2019

OPY-bbt commented Dec 13, 2019

ositano commented Dec 13, 2019

pichillilorenzo commented Dec 13, 2019

pichillilorenzo commented Dec 13, 2019

ositano commented Dec 13, 2019

pichillilorenzo commented Dec 13, 2019

ositano commented Dec 13, 2019

OPY-bbt commented Dec 14, 2019

koteezy commented Dec 17, 2019

shaiful-hisham commented Dec 24, 2019

eryanwcp commented Dec 30, 2019

koteezy commented Jan 12, 2020

fuiyu commented Feb 10, 2020 • edited Loading

a4081675 commented Feb 13, 2020

a4081675 commented Feb 14, 2020

hisaichi5518 commented Feb 17, 2020

asjqkkkk commented Mar 4, 2020 • edited Loading

hisaichi5518 commented Mar 15, 2020

mrcrixx commented Jul 14, 2020

Just an example

letyletylety commented Aug 5, 2020

WangPe1n commented Aug 10, 2020 • edited Loading

WangPe1n commented Aug 10, 2020 • edited Loading

JanusKun commented Aug 13, 2020

Clean-Cole commented Aug 18, 2020

checkblue commented Aug 28, 2020

rajashah33 commented Sep 23, 2020

DRL9 commented Dec 11, 2020 • edited Loading

cijianzy commented Mar 7, 2021

pichillilorenzo commented Mar 7, 2021

kiwiidb commented Apr 28, 2021

pichillilorenzo commented Apr 28, 2021 • edited Loading

maxmitz commented May 26, 2023

codemobiles commented Jul 6, 2024

github-actions bot commented Oct 3, 2024

ositano commented Dec 13, 2019 •

edited

Loading

fuiyu commented Feb 10, 2020 •

edited

Loading

asjqkkkk commented Mar 4, 2020 •

edited

Loading

WangPe1n commented Aug 10, 2020 •

edited

Loading

WangPe1n commented Aug 10, 2020 •

edited

Loading

DRL9 commented Dec 11, 2020 •

edited

Loading

pichillilorenzo commented Apr 28, 2021 •

edited

Loading