动态加载样式表，cssRules出现为空

Question

我试图动态加载样式表，并检查它什么时候已经准备好了cssRules属性，但它是空的，我看不出为什么。 （铬）

下面是一个例子：

http://jsfiddle.net/PeSqR/

var href = "http://twitter.github.io/bootstrap/assets/css/bootstrap.css"; 

var link = document.createElement('link'); 
link.setAttribute('href', href); 
link.setAttribute('rel', 'stylesheet'); 
link.setAttribute('type', 'text/css'); 

var intervalId = setInterval(
    function(){ 
     try{ 
      //console.log(link.sheet); 
      //console.log(link.sheet.cssRules); 
      if(link.sheet && link.sheet.cssRules.length){ 
       clearInterval(intervalId); 
       clearTimeout(timeoutId); 
      } 
     } 
     catch(e){ 
      //console.log('err...' + e.message); 
     } 
    }, 
10); 

var timeoutId = setTimeout(
    function(){ 
     clearInterval(intervalId); 
     clearTimeout(timeoutId); 
     alert('ERROR'); 
    }, 
5000); 

document.getElementsByTagName('head')[0].appendChild(link); 

感谢您的帮助。

Answer 1

你最好的选择将是刚刚在link.sheet运行空支票试图访问link.sheet.cssRules属性返回该错误：

[Exception... "The operation is insecure." code: "18" nsresult: "0x80530012 (SecurityError)" location: ""]

试试这个检查来代替：

if (link.sheet != null)