如何在Flutter中隐藏WebView中的页眉和页脚? [英] How to hide header and footer in webview in Flutter.?

问题描述

我是扑扑的新手，我想在扑扑应用程序中隐藏网站的一部分.我在pubspec.yaml文件中添加了Flutter flutter_webview_plugin，并将包导入了我的feed.dart页面. flutterWebviewPlugin.evalJavascript("alert('Hi, I just executed')");在我运行应用程序时执行.但是flutterWebviewPlugin.evalJavascript("document.getElementById('header04-2j').style.display = 'none';");我试图隐藏标题，但无法正常工作. 波纹管是源代码..请帮助.

I'm beginner to flutter , I want to hide section of website in my flutter application . I added flutter flutter_webview_plugin in pubspec.yaml file and imported package to my feed.dart page. the flutterWebviewPlugin.evalJavascript("alert('Hi, I just executed')"); is executed when i run the application. But flutterWebviewPlugin.evalJavascript("document.getElementById('header04-2j').style.display = 'none';"); i tried to hide header but its not working. Bellow is the source code .. Please help .

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")),
    );
  }
}

    

在此处输入图片描述

推荐答案

这很可能是由于在您在代码中调用该方法时未加载网页，因此元素不存在.

This is likely due to your webpage not being loaded, and therefore the element not existing, at the point you call that method in your code.

一种解决方案是等到页面加载完毕后再尝试使用onStateChanged流删除元素.

A solution would be to wait until the page is loaded before attempting to remove the element using the 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();
}

这篇关于如何在Flutter中隐藏WebView中的页眉和页脚?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！