javascript - 如何使用Flutter WebView评估Javascript？(How to use Flutter webview evaluateJavascript?)

Question

I try to use webview evaluateJavascript and got error.(我尝试使用webview evaluateJavascript并出现错误。)

WebView Controller has 2 function;(WebView Controller具有2个功能；) evaluateJavascript , and loadUrl .(evaluateJavascript ，并loadUrl 。) I tested both in onPageFinished: (url){} , so I can initialise my javascript code.(我在onPageFinished: (url){}都进行了测试，因此可以初始化我的JavaScript代码。) Documentation is not clear.(文档不明确。) But the error tells me something missing pr not implemented in webview plugin.(但是错误告诉我一些未在Webview插件中实现的缺失。) I am trying to load page and initialising some basic javascript so I can hide some part of the page.(我正在尝试加载页面并初始化一些基本的JavaScript，因此我可以隐藏页面的某些部分。) How to use Flutter webview evaluateJavascript?(如何使用Flutter WebView评估Javascript？) 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)), ); }); } }   ask by Nick translate from so

Answer 1

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(TypeError：未定义不是对象) This merely means the object for which you're trying to modify the style attribute doesn't exist.(这仅表示您要修改其style属性的对象不存在。) 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 .(再看一下调试控制台，您会注意到该代码-应该返回stackoverflow网站的完整top-bar js-top-bar top-bar__network _fixed仅返回一点，不足以到达使用类top-bar js-top-bar top-bar__network _fixed的header元素。 top-bar js-top-bar top-bar__network _fixed 。)