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

Posted 2023-02-23

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

【英文标题】：How to inject a simple code in Flutter WebView to hide a part of the website (footer)?

【发布时间】：2020-04-03 07:28:04

【问题描述】：

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

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

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

Syncshop

下面是我试图隐藏页脚的那个标签 Webview 的代码

更新：已修复。下面的代码对我有用 注意：我也重新检查了网站，把上面网站的footer类名对应的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';");
          ,
        )
      ),
    );
  

【参考方案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")),
    );
  

【讨论】：

嗨，我可以在上面的代码中哪里包含它？我有点迷失了

你可以通过内联。我没有尝试过使用字符串，但值得尝试在字符串中定义 javascript，然后将其传递给 evalJavascript() 函数。

好的，我稍后再试。另一个问题，我应该在 javascript 中通过内联这段代码吗？ ``` 页脚#footer，div#st_notification_1，#sidebar_box 显示：无！重要； ``` 你是这个意思吗？

这不是 JavaScript 代码。这是CSS。如果您想使用 javascript 更改 css，请执行 const foot = document.querySelector('#footer'); foot.setAttribute('style', 'text-align: center');

感谢您的帮助！现在我只是想找出如何使用官方的flutter dev webview插件缓存网站。问候

【参考方案2】：

感谢这里的答案。我将它们与this javascript answer 结合起来，创建了一个可以轻松注入完整css 文件的函数。如果您有大量覆盖，或者您想在单独的文件中随时间跟踪它们，这将非常方便。

在您的网络视图中：

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);