Flutter webview如何使用evaluateJavascript？

Question

我尝试使用webview evaluateJavascript 并出错。 WebView Controller有2个功能； evaluateJavascript 和 loadUrl。我在onPageFinished: (url){} 中测试了两者，所以我可以初始化我的javascript 代码。文档不清楚。但是该错误告诉我缺少 pr 未在 webview 插件中实现。我正在尝试加载页面并初始化一些基本的 javascript，以便隐藏页面的某些部分。

Flutter webview如何使用evaluateJavascript？

错误：

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.

代码：

    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)),
              );
            });
      }

    }

Answer 1

您使用正确 - 尽管您不需要将其包装在里面

javascript:(function() { }

无论如何，这是错误信息的重要部分：

TypeError: undefined is not an object

这仅仅意味着您尝试修改其样式属性的对象不存在。

如果您尝试以下代码

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

看看调试控制台，你会注意到这段代码——应该返回stackoverflow网站的完整HTML——只返回一点点，不足以到达使用@987654324类的标题元素@。

Answer 2

使用document.getElementsByClassName('someclassname')[0] 对我有用。