如何在 Flutter WebView 中注入一个简单的代码来隐藏网站的一部分（页脚）？

Question

我是 Flutter 的新手，目前，我正在制作一个非常简单的应用程序，它只是一个 WebView。我的问题是如何将此代码插入到我的 Flutter WebView 中？

footer#footer, div#st_notification_1, #sidebar_box {
    display: none!important;
}

目前，我正在尝试在我的应用程序选项卡之一上使用 Flutter 团队的 WebView 插件。我正在尝试加载和隐藏页脚的网站是：

同步商店

下面是我试图隐藏页脚的那个选项卡 Webview 的代码

更新：修复它。下面的代码对我 有用 注意：我还重新检查了网站并将其更改getElementsById为getElementsByClassName与上面网站上页脚的类名相对应。

注2：Flutter 包中有很多 WebView 应用程序，我使用的是 Flutter 团队的 Flutter Webview。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class ProfileAccount extends StatefulWidget {
  ProfileAccount({Key key}) : super(key: key);

  @override
  _ProfileAccountState createState() => _ProfileAccountState();
}

class _ProfileAccountState extends State<ProfileAccount> {
    WebViewController _myController;
    final Completer<WebViewController> _controller =
     Completer<WebViewController>();
  @override
  Widget build(BuildContext context) {
    return SafeArea(
          child: Scaffold(
            body: WebView(
              initialUrl: 'https://syncshop.online/en/login',
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (controller) {
                _myController = controller;
              },
          onPageFinished: (initialUrl) {
            _myController.evaluateJavascript("document.getElementsByClassName('footer-container')[0].style.display='none';");
          },
        )
      ),
    );
  }
}

Answer 1

你可以试试

flutterWebviewPlugin.evalJavascript('alert("Hello World")')

请记住，evalJavascript()期望JS不是HTML，所以你不能使用 like

flutterWebviewPlugin.evalJavascript('<script language="JavaScript" type="text/javascript">alert("Hello World")</script>')

这是完整的示例供您参考，

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class JSInWebView extends StatefulWidget {
  @override
  JSInWebViewState createState() {
    return new JSInWebViewState();
  }
}

class JSInWebViewState extends State<JSInWebView> {
  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')");
  }

  @override
  void dispose() {
    flutterWebviewPlugin.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      url: 'https://google.com',
      hidden: true,
      appBar: AppBar(title: Text("Elite")),
    );
  }
}