How do you get the value from a JavaScript function in Flutter WebView?

Question

Hi I have a webView and I'm simply trying to get the value from the WebView to return true or false when the user presses a button, I have managed to console.log it, but how do I get this value and put it into flutter? Thanks.

web.WebView(
          initialUrl: "https://www.tiktok.com/@tiktok",
          javascriptMode: web.JavascriptMode.unrestricted,
          onWebViewCreated: (web.WebViewController webViewController) {
            _controller.complete(webViewController);
            _myController = webViewController;
          },
          onPageFinished: (String url) {
            _myController.evaluateJavascript("""
            window.onclick = e => {
    console.log(e.target.className);
    console.log(e.target.tagName);
}
    var element = document.getElementsByClassName('jsx-4074580611');

    element[0].addEventListener('click', function(event) {
       setTimeout(function (){ 
        if(element[0].innerText == 'Following') {
    console.log("True");
    //RETURN TRUE TO FLUTTER
  }else{
    console.log("False");
    //RETURN FALSE TO FLUTTER
    }  
       }, 1500);
  });
            """);
          },
          javascriptChannels: Set.from([
          ])
      ),
    );
  }
}

Pavel Zdenek · Accepted Answer · 2020-06-19 11:48:08Z

2

+50

You won't get anything back from the webpage like this, because the page doesn't know how to talk back to your Flutter container. You need a callback, which you interestingly already defined in your code, but not used. It's the javascriptChannels:

https://pub.dev/documentation/webview_flutter/latest/webview_flutter/WebView/javascriptChannels.html

It will create a JS window object with your chosen name, which you can then call from JS with your value. You get the value back in Flutter. Basically whole Cordova is built on such mechanism.

Some more practical suggestions:

give your channel as unique name as possible, to avoid namespace fight with other JS libraries. Definitely not "Print" like in the example.
the callback will most likely be asynchronous. Don't expect the WebView to drop everything just to deliver a value immediately in your Channel callback. It will most probably go on doing other things in JavaScript, and the callback will appear later.

Disclaimer: i have zero experience with Flutter, but i have tons of experience with WebView interoperability on iOS and Android. Please create a new issue for any further advanced Flutter questions you may want to ask now.

answered Jun 19, 2020 at 11:48

Pavel Zdenek

7,2831 gold badge25 silver badges39 bronze badges

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

6 Comments

KylianMbappe Over a year ago

I've looked into callbacks but they only seem to communicate with code that I HAVE put in on the HTML page, I obviously cannot access tiktok.com's raw HTML. Is there a way I can run this code then simply get the true or false value back? Thanks.

Pavel Zdenek Over a year ago

You can add (inject) your code to listen on events of someone else's webpage. That's what your code already does. So instead of console.log you call ButtonClickChannel.postMessage("true")

KylianMbappe Over a year ago

Thank you so much!

faysal neowaz Over a year ago

stackoverflow.com/questions/66736005/… Please help Its Urgent @PavelZdenek

selvakumar Over a year ago

In the java script side when I call with DhAp.postMessage(), it throws an error saying DhAp is not defined, how to handle this. ?

|

Collectives™ on Stack Overflow

How do you get the value from a JavaScript function in Flutter WebView?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related