webview_flutter 无法隐藏/更改某些元素

Posted 2023-02-23

【中文标题】webview_flutter 无法隐藏/更改某些元素

【英文标题】：webview_flutter can't hide/change some elements

【发布时间】：2021-12-09 18:09:00

【问题描述】：

使用带有evaluatejavascript() 的webview_flutter，我已经能够修改我网站的大多数元素的样式，但不明白为什么有些元素没有被修改。

包含我的 WebView，在 WebView 中显示的网站是https://dme.com.sg/index.php?dispatch=auth.login_form

我还包含了一个快照，展示了如何隐藏和修改大多数元素的颜色，但似乎“表单”中的所有元素都无法更改。

如果我也可以修改它们，我也将不胜感激，尤其是将它们的颜色更改为较暗的主题以匹配应用程序的颜色。

WebView(
      initialUrl: 'https://dme.com.sg/index.php?dispatch=auth.login_form',
      javascriptMode: JavascriptMode.unrestricted,
      onWebViewCreated: (controller) 
        _controller = controller;
      ,
      onPageStarted: (url) 
        _controller.evaluateJavascript(
            "document.getElementsByClassName('tygh-top-panel clearfix')[0].style.display='none';"
                "document.getElementsByClassName('tygh-header clearfix')[0].style.display='none';"
                "document.getElementsByClassName('tygh-header')[0].style.display='none';"
                "document.getElementsByClassName('tygh-footer')[0].style.display='none';"
                "document.getElementsByClassName('auth-information-grid')[0].style.display='none';"
                "document.getElementsByClassName('ty-breadcrumbs clearfix')[0].style.display = 'none';"
                "document.getElementsByClassName('container-fluid  content-grid')[0].style.background = 'black';"
                "document.getElementsByClassName('ty-mainbox-title')[0].style.color = 'pink';"
                "document.getElementsByClassName('buttons-container clearfix')[0].style.display = 'none';"
        );
      ,
    ),

【参考方案1】：

一直在修改它，并查找 JavaScript 教程，我设法找到了解决方案。所以我不确定如何或为什么，所以仍然希望有人可以评论一个解释，以便我更好地理解。

我学到的其他东西，在将其移动到 Flutter webview 之前，只需使用 chrome 的“控制台”选项卡来测试页面上的 java 脚本会更容易。

使用“document.getElementsByClassName("buttons-container clearfix")”命令，我得到了该类的使用位置列表，发现我想要更改的是1。当您键入正确的索引号时，它会在网站上突出显示。

然后使用 "document.getElementsByClassName("buttons-container clearfix")1.style.background = 'black'" 我设法改变了我想要的元素的样式。

如果它可以帮助其他人，我已经在此处包含了 chrome 控制台的屏幕截图。