Question

我已成功将自定义CSS注入到Webview中带有Javascript的网站。但是我想在网站完全加载自定义CSS文件后显示网站。为此，我需要添加什么代码？ TIA

Answer 1

在现代浏览器中，link标签支持onload事件（但我隐约记得，Android浏览器并非如此，Android Webview可能也是如此，您必须检查！），例如您可以执行以下操作：

<html>
    <head>
        <style>
            body {
                opacity: 0;
                transition: opacity 2s ease-in-out;
            }
        </style>
    
        <link rel="stylesheet" href="./path/to/styles.css" onload="load()" onerror="error()" />
    
        <script>
            
            const load = function() {
                console.log('styles successfully loaded');
                if ( document.querySelector('body').style['opacity'] !== 1) {
                    document.querySelector('body').style['opacity'] = 1;
                }
            }
            
            const error = function() {
                console.log('error loading styles');
                if ( document.querySelector('body').style['opacity'] !== 1) {
                    document.querySelector('body').style['opacity'] = 1;
                }
            }
        </script>
    </head>

    <body>
        <b>I'm the body</b>
    </body>
</html>

在不支持onload标签上的onerror / link的浏览器中，您可以使用各种技巧，例如将元素的类仅在动态加载的样式表中定义，然后定期检查该元素是否具有预期的样式规则，如果有，则加载css。

CSS注入完成后如何在webview中显示网站？

1 个答案: