![](/img/trans.png)
[英]How to inject a simple code in Flutter WebView to hide a part of the website (footer)?
[英]How to hide header and footer in webview in Flutter.?
我是 flutter 的初学者,我想在我的 flutter 应用程序中隐藏网站部分。 我在pubspec.yaml
文件中添加了 flutter flutter_webview_plugin
package 导入到我的提要中。 flutterWebviewPlugin.evalJavascript("alert('Hi, I just executed')");
在我运行应用程序时执行。 但是flutterWebviewPlugin.evalJavascript("document.getElementById('header04-2j').style.display = 'none';");
我试图隐藏 header 但它不起作用。 贝娄是源代码..请帮助。
enter code here
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
class FeedPage extends StatefulWidget {
@override
FeedPageState createState() {
return new FeedPageState();
}
}
class FeedPageState extends State<FeedPage> {
final flutterWebviewPlugin = new FlutterWebviewPlugin();
// alternatively you can define variable as var js = "YOUR_SCRIPT"; and use it inside evalJavascript
@override
void initState(){
super.initState();
flutterWebviewPlugin.evalJavascript("alert('Hi, I just executed')"); // executed
flutterWebviewPlugin.evalJavascript("document.getElementById('header04-2j').style.display = 'none';"); // not executed
}
@override
void dispose() {
flutterWebviewPlugin.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return WebviewScaffold(
url: 'https://www.esdatech.com/',
hidden: true,
appBar: AppBar(title: Text("ESDA")),
);
}
}
这可能是由于您的网页未加载,因此元素不存在,此时您在代码中调用该方法。
一种解决方案是等到页面加载完毕后再尝试使用onStateChanged
stream 删除元素。
StreamSubscription<WebViewStateChanged> _onStateChanged;
@override
void initState(){
super.initState();
flutterWebviewPlugin.evalJavascript("alert('Hi, I just executed')");
_onStateChanged =
flutterWebViewPlugin.onStateChanged.listen((WebViewStateChanged state) {
if(state.type == WebViewState.finishLoad) {
flutterWebviewPlugin.evalJavascript("document.getElementById('header04-2j').style.display = 'none';");
}
}
);
}
@override
void dispose() {
_onStateChanged.cancel();
flutterWebviewPlugin.dispose();
super.dispose();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.