:::

解決動態載入CSS失敗的問題:不要修改<link>標籤的屬性 / Why Loading CSS Dynamically Fail: Don't Modify <link> While Loading

image

我在KALS專案中有用到以jQuery動態載入CSS的技巧,但是最近在Chrome上卻意外不能執行。研究之後才發現這是因為我在載入CSS途中去修改CSS載入標籤的title屬性,造成CSS載入失敗。解決方法是應該在建立載入CSS的標籤時就加入title屬性,而不要事後修改。


載入CSS失敗的案例 / Fault Example

接著我們來看一下㑹失敗的案例。這個例子必需要用Google Chrome 53.02785.116m版以上開啟才會發生,在Firefox或IE上面則不會遇到這個問題。請注意看JavaScript程式碼裡面的內容,我在建立了標籤之後就插入到裡面,此時CSS會載入。但我又在後面修改了標籤的title屬性,就造成CSS載入中斷了。

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
    這是錯誤的例子:CSS沒有正常載入,文字還是黑色的。
    <script>
        $(function () {
            var _link = $('<link href="style.css" type="text/css" rel="stylesheet" />');
            _link.appendTo("head");
            
            // 修改link屬性
            _link.attr("title", "global");
        });
    </script>
</body>
</html>

運作結果:


成功的案例 / Workable Example

接下來我們換一個改良後的程式碼。CSS依舊是同一個檔案,不過JavaScript裡面的敘述有所修改。我在建立標籤的時候設定了title屬性,然後才插入到裡面,這樣子CSS就能夠正常讀取了。

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
    這是正確的例子:CSS有正常載入,文字變成紅色的。
    <script>
        $(function () {
            var _link = $('<link href="style.css" type="text/css" rel="stylesheet" />');
            
            // 提前修改link屬性
            _link.attr("title", "global");
            
            _link.appendTo("head");
        });
    </script>
</body>
</html>

運作結果:

0 意見:

留言工具: