Flutter在页面加载InAppWebView插件之前注入css

Question

我在Flutter中的InAppWebView组件中注入了css，它隐藏了页面上的内容，但内容会显示一段时间。我在选项中尝试了contentBlockers来阻止css选择器，并在onLoadStart、onLoadStop、onWebViewCreated和onProgressChanged的事件中注入css，但我无法解决闪烁问题。

如何在页面出现在屏幕上之前注入css而不会出现内容闪烁？

Answer 1

您可以在onPageCommit回调中注入CSS。

这是一个示例：

InAppWebView(
initialUrlRequest: URLRequest(
url: Uri.parse("https://google.com"),
),
onPageCommitVisible: (controller, url) {
controller.evaluateJavascript(source: """
var style = document.createElement('style');
style.innerHTML = "img{ display: none; }";
document.head.appendChild(style);
""");
},
)

这将CCD_ 2元素从"0"隐藏起来；https://google.com"。