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

Question

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

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

目前，我正在尝试在我的应用程序选项卡中使用Flutter团队的WebView插件。我正在尝试加载并隐藏页面底部的网站是：

Syncshop

下面是我尝试隐藏底部的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';");
          },
        )
      ),
    );
  }
}

- KDC

Answer 1

你可以尝试

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

请记住，evalJavascript() 函数需要传入 JS 而不是 HTML，因此您不能像下面这样使用：

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

- Kiran Maniya

---

你可以进行内联传递。我没有尝试过使用字符串，但是值得尝试的是在字符串中定义JavaScript，然后将其传递给evalJavascript()函数。 - Kiran Maniya

这不是 JavaScript 代码，而是 CSS。如果你想使用 JavaScript 更改 CSS，请按照以下步骤操作：foot.setAttribute('style', 'text-align: center');``` - Kiran Maniya

此外，这里有一篇很好的文章。https://www.digitalocean.com/community/tutorials/how-to-modify-attributes-classes-and-styles-in-the-dom 可供参考。 - Kiran Maniya

最后一个问题，抱歉如果我问得太多了，但我真的找不到好的解决方案来解决这个问题。我刚刚发现 flutterWebviewPlugin.evalJavascript 只有在 AppBar() 内才能工作，所以我应该将 css 放在 dom 中，然后将该 javascript 传递到 flutterWebviewPlugin.evalJavascript 中？ - KDC

谢谢您的帮助！现在我只是在尝试找出如何使用官方Flutter Dev WebView插件缓存网站。祝好！ - KDC

Answer 2

感谢这里的答案。我将它们与此JavaScript答案结合起来，制作了一个函数，用于轻松注入完整的CSS文件。如果您有大量的覆盖或想要在单独的文件中跟踪它们，这非常方便。

在您的Web视图中：

onPageFinished: (finish) async {
    // Override CSS values
    String overrideJs = await jsInjectionString(context, 'assets/my_css_override.css');
    _webController.evaluateJavascript(overrideJs);    
 },

其他地方：

  // Build the javascript injection string to override css
  Future<String> jsInjectionString(BuildContext context, String asset) async {
    String cssOverride = await loadStringAsset(context, asset);
    return "const cssOverrideStyle = document.createElement('style');"
        "cssOverrideStyle.textContent = `$cssOverride`;"
        "document.head.append(cssOverrideStyle);";
  }

  // Load a string asset
  Future<String> loadStringAsset(BuildContext context, String asset) async {
    return await DefaultAssetBundle.of(context).loadString(asset);
  }

- Emilie