Как использовать Flutter WebView для оценки Javascript?

Question

Я пытаюсь использовать веб-просмотрКонтроллер WebView имеет 2 функции;оценивать JavaScript и loadUrl.Я протестировал оба в onPageFinished: (url) {, чтобы я мог инициализировать свой код JavaScript.Документация не ясна.Но ошибка говорит мне о том, что чего-то не хватает, что не реализовано в плагине webview.Я пытаюсь загрузить страницу и инициализировать некоторый основной javascript, чтобы я мог скрыть некоторую часть страницы.

Как использовать веб-просмотр FluttervaluJavascript?

Ошибка:

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 не является объектом

Это просто означает, что объект, для которого вы пытаетесь изменить атрибут стиля, не существует.

Если вы попробуете следующий код

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

и, посмотрев на консоль отладки, вы заметите, что этот код, который должен возвращать полный HTML-код для веб-сайта stackoverflow, просто возвращает немного, и его недостаточно для достижения элемента заголовка, который используеткласс top-bar js-top-bar top-bar__network _fixed.