为什么"document.styleSheets"在每 3 到 5 次浏览器刷新后返回空值？

我想要实现的是让用户定义要由我编写的JavaScript文件处理的特定样式表，这是我用来获取指定样式表的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="sheet-1.css">
    <link rel="stylesheet" href="sheet-2.css">
    <link rel="stylesheet" href="sheet-3.css">
    <!-- other css files -->
    <style>
        /* inline styles */
    </style>
</head>
<body>
    <script src="jquery-2.1.1.min.js"></script>
    <!-- some plugins -->
    <script>
        jQuery(document).ready(function($) {
            // user specified stylesheets
            var watchedStyleSheetsNames = [ 'sheet-1.css', 'sheet-2.css', 'sheet-3.css' ]
            var allSheets    = document.styleSheets,
                targetSheets = [];
            for ( var i = watchedStyleSheetsNames.length - 1; i >= 0; i--) {
                Object.keys( allSheets ).forEach ( function (j) {
                    if( allSheets[j].href && allSheets[j].href.indexOf( watchedStyleSheetsNames[i] ) !== -1 ) {
                        targetSheets.push(allSheets[j]);
                    }
                });            
            };
            // result
            console.log( 'Watched Stylesheets Array : ' + targetSheets );
        });
    </script>
</body>
</html>

问题是，第一次加载页面时一切都很好，然后在刷新3到5次后，targetSheets数组返回空值，这显然会破坏此后所做的一切，然后在再次刷新后，我得到了预期的值，以此类推。我尝试了所有浏览器，清除了缓存，同样的事情一次又一次地发生。这是我在控制台中得到的图像：

https://www.dropbox.com/s/ipnc20hcdr3d6wl/01.png?dl=0

我在网上测试了我的代码；本地使用所有浏览器的最新版本的wamp服务器。那么是什么导致了这个问题，我该如何解决呢

谢谢你抽出时间。

编辑

我找到了答案，这是因为实现了prefixfree插件，它删除了链接节点，然后将处理后的css重新插入样式标记中。

您正在jQuery ready处理程序中查找样式表。jQuery ready处理程序的全部意义在于，它在HTML解析后触发，但在下载并评估所有依赖项之前触发。因此，很明显，有时候，您的代码在加载样式表之前就已经运行了。

您需要等待样式表加载完成。我所知道的检查链接样式表是否已加载的唯一方法是动态加载它，在设置href之前查看load事件。可能还有其他方法，那只是我唯一知道的一种。

例如，在您的情况下，您可以从标记中删除<link>元素，并执行以下操作：

jQuery(document).ready(function($) {
    // user specified stylesheets
    var watchedSheets = [
        { name: 'sheet-1.css' },
        { name: 'sheet-2.css' },
        { name: 'sheet-3.css' }
    ];
    var completed = 0;
    var head = document.querySelector('head');
    watchedSheets.forEach(function(sheet, index) {
        var link = document.createElement('link');
        link.onload  = function() {
            sheet.loaded = true;
            ++completed;
            if (completed === watchedSheets.length) {
                done();
            }
        };
        link.onerror = function() {
            sheet.error = true;
            ++completed;
            if (completed === watchedSheets.length) {
                done();
            }
        };
        link.rel = "styleshet";
        link.href = sheet.name;
        head.appendChild(link);
    });
    function done() {
        var allSheets    = document.styleSheets,
            targetSheets = [];
        Object.keys( allSheets ).forEach ( function (j) {
            var sheet = watchedSheets[j];
            if( !sheet.error && allSheets[j].href && allSheets[j].href.indexOf( sheet.name ) !== -1 ) {
                targetSheets.push(allSheets[j]);
            }
        });            
        // result
        console.log( 'Watched Stylesheets Array : ' + targetSheets );
    }
});

相关内容

最新更新

热门标签：