如何捕捉CSS樣式的onload事件？

Question

我加載CSS

var ss = document.createElement("link"); 
var url = 'http://site.ru/style.css'; 
ss.setAttribute("rel", "stylesheet"); 
ss.setAttribute("type", "text/css"); 
ss.setAttribute("href", url); 
document.getElementsByTagName("head")[0].appendChild(ss); 

我想CSS加載後調用功能，但標籤鏈接沒有onload事件，是有辦法做到這一點？

Answer 1

您目前沒有通過Ajax加載該css內容，但您可以使用來做。這樣，當數據傳輸完成時，您也可以使用回調。在這個例子中，我使用jQuery來簡化和方便。

請注意：這隻適用於如果您的css文件位於同一個域上的您的javascript &。

$.get('http://site.ru/style.css', function(css) { 
    $('<style>', { 
     html: css 
    }).appendTo(document.head || document.getElementsByTagName('head')[0]); 
}); 

簡體香草的Javascript可能看起來像：

var req; 

try { 
    req = new XMLHttpRequest(); 
} catch (e) { 
    req = new ActiveXObject('Microsoft.XMLHTTP'); // there are plenty more 
} finally { 
    req.onreadystatechange = function() { 
     if(req.readyState === 4) { // simplified/shortened 
      var head   = document.head || document.getElementsByTagName('head')[0] || document.documentElement, 
       lnk   = document.createElement('style'); 
       lnk.type  = 'text/css'; 
       lnk.textContent = lnk.text = req.responseText; 

      head.insertBefore(lnk, head.firstChild); 
     } 
    }; 

    req.open('GET', 'http://site.ru/style.css', true); 
    req.send(null); 
}