javascript:在LINK上捕获加载事件

Question

我正在尝试将事件处理程序附加到链接标记的加载事件,以在加载样式表后执行某些代码.

new_element = document.createElement('link');
new_element.type = 'text/css';
new_element.rel = 'stylesheet';
new_element.href = 'http://domain.tld/file.css';
new_element.addEventListener('load', function() { alert('foo'); }, false);
document.getElementsByTagName('head')[0].appendChild(new_element)

我也试过onreadystatechange

new_element.onreadystatechange = function() { alert('foo'); }

不幸的是,这两种方法都没有导致触发警报.此外,在使用addEventListener注册'load'事件的处理程序后,new_element.onload为null.这是正常的吗？

谢谢,安德鲁

ps:我可能不会使用任何框架来解决这个问题

Answer 1

在我看来,对于使用IMG标记及其onerror事件的此问题,这是一个更好的解决方案.这个方法可以完成工作而不需要循环,进行扭曲样式遵守,或者在iframe中加载文件等.这个解决方案在文件加载时正确激活,如果文件已经被缓存,则立即激活(这比大多数DOM更具讽刺性)加载事件处理缓存资产).这是我博客上的一篇文章,解释了该方法 - Back Alley Coder帖子 - 我厌倦了这个没有合法解决方案,享受!

var loadCSS = function(url, callback){
    var link = document.createElement('link');
        link.type = 'text/css';
        link.rel = 'stylesheet';
        link.href = url;

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

    var img = document.createElement('img');
        img.onerror = function(){
            if(callback) callback(link);
        }
        img.src = url;
}

Answer 2

对于CSS样式表(一般不是LINK元素)我使用手动间隔,通过戳它的规则长度.它适用于crossbrowser(AFAIT).

try {
  if ( cssStylesheet.sheet && cssStylesheet.sheet.cssRules.length > 0 )
    cssLoaded = 1;
  else if ( cssStylesheet.styleSheet && cssStylesheet.styleSheet.cssText.length > 0 )
    cssLoaded = 1;
  else if ( cssStylesheet.innerHTML && cssStylesheet.innerHTML.length > 0 )
    cssLoaded = 1;
}
catch(ex){}

在上面的代码中,cssStylesheet是DOMElement.

Answer 3

即使您添加了内联：

<link rel="stylesheet" type="text/css" href="foo.css" onload="alert('xxx')"/>

它不会在Firefox火，因为没有一个onload事件link的元素。（它将在 IE 中工作）