0

使用带有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';"
        );
      },
    ),

在此处输入图像描述

4

1 回答 1

0

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

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

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

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

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

在此处输入图像描述

于 2021-10-24T09:08:08.733 回答