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

readyjQueryハンドラー内からスタイルシートを探しています。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 に答える