如何在 Flutter 的 webview 中隐藏页眉和页脚。?
Posted
技术标签:
【中文标题】如何在 Flutter 的 webview 中隐藏页眉和页脚。?【英文标题】:How to hide header and footer in webview in Flutter.? 【发布时间】:2021-02-03 06:08:41 【问题描述】:我是 Flutter 的初学者,我想在我的 Flutter 应用程序中隐藏网站部分。我在 pubspec.yaml
文件中添加了颤振 flutter_webview_plugin
并将包导入到我的 feed.dart 页面。 flutterWebviewPlugin.evaljavascript("alert('Hi, I just executed')");
在我运行应用程序时执行。但是flutterWebviewPlugin.evalJavascript("document.getElementById('header04-2j').style.display = 'none';");
我试图隐藏标题但它不起作用。
下面是源代码..请帮忙。
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")),
);
enter image description here
【问题讨论】:
如果我的回答对你有帮助,请采纳。 【参考方案1】:这可能是由于您的网页未加载,因此元素不存在,此时您在代码中调用该方法。
解决方案是等到页面加载完毕后再尝试使用onStateChanged
流删除元素。
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();
【讨论】:
以上是关于如何在 Flutter 的 webview 中隐藏页眉和页脚。?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 webview_flutter 包运行自定义 Javascript?