How to use Flutter webview evaluateJavascript?

Question

I try to use webview evaluateJavascript and got error. WebView Controller has 2 function; evaluateJavascript, and loadUrl. I tested both in onPageFinished: (url){}, so I can initialise my javascript code. Documentation is not clear. But the error tells me something missing pr not implemented in webview plugin. I am trying to load page and initialising some basic javascript so I can hide some part of the page.

Error:

Syncing files to device iPhone X...
flutter: Page finished loading: https://stackoverflow.com/
[VERBOSE-2:ui_dart_state.cc(148)] Unhandled Exception: PlatformException(evaluateJavaScript_failed, Failed evaluating JavaScript, JavaScript string was: 'javascript:(function() { var head = document.getElementsByClassName('top-bar js-top-bar top-bar__network _fixed')[0].style.display='none'; })()'
Error Domain=WKErrorDomain Code=4 "A JavaScript exception occurred" UserInfo={WKJavaScriptExceptionLineNumber=1, WKJavaScriptExceptionMessage=TypeError: undefined is not an object (evaluating 'document.getElementsByClassName('top-bar js-top-bar top-bar__network _fixed')[0].style'), WKJavaScriptExceptionColumnNumber=117, WKJavaScriptExceptionSourceURL=https://stackoverflow.com/, NSLocalizedDescription=A JavaScript exception occurred})
#0      StandardMethodCodec.decodeEnvelope (package:flutter/src/services/message_codecs.dart:564:7)
#1      MethodChannel.invokeMethod (package:flutter/src/services/platform_channel.dart:302:33)
<asynchronous suspension>
#2      WebViewController.evaluateJavascript (package:web<…>
Application finished.

Code:

    class _WebViewExampleState extends State<WebViewExample> {
    WebViewController _myController;
      bool _loadedPage = false;

      @override
      void initState() {
        // TODO: implement initState
        super.initState();
        setState(() {
          _loadedPage = false;
        });
      }


      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.green,
            title: const Text(
              ’Stackoverflow’,
              style: TextStyle(fontSize: 14),
            ),

          ),
          body: Builder(builder: (BuildContext context) {
            return new Stack(
              children: <Widget>[
                new WebView(
                  initialUrl: 'https://stackoverflow.com',
                  javascriptMode: JavascriptMode.unrestricted,
                  onWebViewCreated: (controller){
                    _myController = controller;
                  },
                  javascriptChannels: <JavascriptChannel>[
                    _toasterJavascriptChannel(context),
                  ].toSet(),
                  onPageFinished: (url){
                    print('Page finished loading: $url');

                    _myController.evaluateJavascript("javascript:(function() { " +
                        "var head = document.getElementsByClassName('top-bar js-top-bar top-bar__network _fixed')[0].style.display='none'; " +
                        "})()");

/*
                _myController.loadUrl("javascript:(function() { " +
                    "var head = document.getElementsByClassName('top-bar js-top-bar top-bar__network _fixed')[0].style.display='none'; " +
                    "})()");
*/

                    setState(() {
                      _loadedPage = true;
                    });
                  },
                ),
                _loadedPage == false
                    ? new Center(
                        child: new CircularProgressIndicator(
                            backgroundColor: Colors.green),
                      )
                    : new Container(),
              ],
            );
          }),

        );
      }

      JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
        return JavascriptChannel(
            name: 'Toaster',
            onMessageReceived: (JavascriptMessage message) {
              Scaffold.of(context).showSnackBar(
                SnackBar(content: Text(message.message)),
              );
            });
      }

    }

Joel Chu · Accepted Answer · 2022-07-11 05:03:54Z

10

All the answers are outdated now, and evaluateJavascript no longer existed in the package. It's now call runJavascript; If you don't need value return from your javascript, otherwise use runJavascriptReturningResult.

You can see an example here

edited Jul 11, 2022 at 5:03

answered Jul 11, 2022 at 0:14

Joel Chu

9681 gold badge11 silver badges26 bronze badges

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

Comments

obscure · Accepted Answer · 2019-05-19 12:07:34Z

3

You are using it correctly - though you don't need to wrap it inside

javascript:(function() { }

Anyway, this is the important part of the error message:

TypeError: undefined is not an object

This merely means the object for which you're trying to modify the style attribute doesn't exist.

If you try the following code

_myController.evaluateJavascript("console.log(document.documentElement.innerHTML);");
                  setState(() {
              _loadedPage = true;
            });

and take a look at the debug console, you'll notice that this code - which should return the complete HTML for the stackoverflow website - just returns a little bit and not enough to reach the header element which uses the class top-bar js-top-bar top-bar__network _fixed.

answered May 19, 2019 at 12:07

obscure

13k2 gold badges19 silver badges40 bronze badges

4 Comments

Nick Over a year ago

I couldn't see anything in debug console. All I see this: Xcode build done. 11,6s Syncing files to device iPhone X... flutter: Page finished loading: stackoverflow.com

obscure Over a year ago

And if you try

_myController.evaluateJavascript("console.log(document.title);");                   setState(() {               _loadedPage = true;             });

Nick Over a year ago

I am using IntelliJ and nothing shows in debug console, all I see same as before. Page finished loading: stackoverflow.com

Nick Over a year ago

Its work when I use document.getElementById. But doesn't work with document.getElementsByClassName. Thanks.

Dula · Accepted Answer · 2021-10-24 01:52:17Z

2

Using document.getElementsByClassName('someclassname')[0] worked for me.

edited Oct 24, 2021 at 1:52

Dula

1,4245 gold badges25 silver badges42 bronze badges

answered Oct 23, 2021 at 21:30

user2517910

211 bronze badge

2 Comments

Canada2000 Over a year ago

Did you use it like this ? controller!.evaluateJavascript("document.getElementsByClassName('someclassname')[0];")

Muhammad Babar Over a year ago

Thanks, this is a working, but there is a gotcha, inside onLoadStop, you may need to do

Future.delayed(const Duration(seconds: 5), () {       controller.evaluateJavascript(source: '''document.getElementById('download-pdf-all').click()''');     });

Steven Tan · Accepted Answer · 2022-09-19 09:14:32Z

2

Use controller.evaluateJavascript to edit on webview javascript, available in in_app_webview packages.

Notes that controller.evaluateJavascript need to write inside onLoadStop() functions. Inside the code where your WebView is finished loaded.

Example:

String Username = 'User';
String Password = '123';
InAppWebView(
 ...
onLoadStop: (controller, url) async{
            pullToRefreshController.endRefreshing();
            controller.evaluateJavascript(
                source: '''
                document.getElementById('uname').value = "$Username"; //Autofill in username field
                document.getElementById('pwd').value = "$Password"; //Autofill in password field
                var z = document.getElementById('submitBtn').click(); //Autoclick function
                '''
            );

            setState(() {
              this.url = url.toString();
              urlController.text = this.url;
            });

          },
 ...
)//InAppWebView

answered Sep 19, 2022 at 9:14

Steven Tan

1461 silver badge5 bronze badges

3 Comments

Muhammad Babar Over a year ago

document.getElementById not working

Steven Tan Over a year ago

Make sure that your element id is correct. You can open the browser developer tool to check the element id. Also, remember to double-check the format: controller.evaluateJavascript( source:''' Your content ''' );

Muhammad Babar Over a year ago

The page wasn't fully loaded and available in onLoadStop so I have to add a wait of 5 seconds and after that it's working fine now. Thanks

Collectives™ on Stack Overflow

How to use Flutter webview evaluateJavascript?

4 Answers 4

Comments

4 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related