Question

我尝试使用webviewvaluateJavascript并出现错误。 WebView Controller具有2个功能； EvaluationJavascript和loadUrl。我在onPageFinished：（url）{中都进行了测试，因此可以初始化我的JavaScript代码。文档不明确。但是错误告诉我一些未在Webview插件中实现的缺失。我正在尝试加载页面并初始化一些基本的JavaScript，以便可以隐藏页面的某些部分。

如何使用Flutter Webview EvaluationJavascript？

错误：

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：未定义不是对象

这仅表示您要修改其style属性的对象不存在。

如果您尝试以下代码

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

并查看调试控制台，您会注意到该代码-应该返回stackoverflow网站的完整HTML-仅返回一点，不足以到达使用类{{ 1}}。

如何使用Flutter WebView评估Javascript？

1 个答案: