如何在 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 无法隐藏/更改某些元素

如何使用 webview_flutter 包运行自定义 Javascript?

Flutter中 webview的键盘问题解决

如何在 Flutter 中重新加载 webview?

如何使用 flutter_webview 插件在 Flutter 中启用位置?

如何在flutter中使用flutter_webview_plugin和AndroidX