1

我想要实现的是让用户定义要由我编写的 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 服务器和所有浏览器的最新版本在线和本地测试了我的代码。那么是什么导致了这个问题，我该如何解决呢？

谢谢你的时间。

编辑

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

4

1 回答 1

0

ready您正在从 jQuery处理程序中寻找样式表。jQueryready处理程序的全部意义在于它在 HTML 被解析之后但在所有依赖项都被下载和评估之前触发。显然，有时，您的代码会在样式表加载之前运行。

您需要等到样式表加载完毕。我知道检查链接样式表是否已加载的唯一方法是动态加载它load，在设置href. 可能还有其他方法，这只是我知道的唯一一种。

例如，在您的情况下，您可以<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 );
    }
});
于 2014-10-30T17:33:09.637 回答