链接元素onload

Question

反正有没有听一个<link>元素的onload事件？

F.ex:

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';

link.onload = link.onreadystatechange = function(e) {
    console.log(e);
};

这适用于<script>元素,但不适用<link>.还有另外一种方法吗？我只需要知道外部样式表中的样式何时应用于DOM.

更新:

注入一个隐藏的<iframe>,添加<link>到头部并window.onload在iframe中监听事件是不是一个想法？它应该在加载css时触发,但它可能无法保证它被加载到顶部窗口中......

Answer 1

今天,所有现代浏览器都支持链接标记上的onload事件.所以我会防范黑客攻击,比如创建一个img元素并设置onerror:

if !('onload' in document.createElement('link')) {
  imgTag = document.createElement(img);
  imgTag.onerror = function() {};
  imgTag.src = ...;
} 

这应该为FF-8以及早期和旧版Safari和Chrome版本提供解决方法.

次要更新:

正如迈克尔指出的那样,有一些浏览器例外,我们总是希望应用黑客攻击.在Coffeescript中:

isSafari5: ->
  !!navigator.userAgent.match(' Safari/') &&
      !navigator.userAgent.match(' Chrom') &&
      !!navigator.userAgent.match(' Version/5.')

# Webkit: 535.23 and above supports onload on link tags.
isWebkitNoOnloadSupport: ->
  [supportedMajor, supportedMinor] = [535, 23]
  if (match = navigator.userAgent.match(/\ AppleWebKit\/(\d+)\.(\d+)/))
    match.shift()
    [major, minor] = [+match[0], +match[1]]
    major < supportedMajor || major == supportedMajor && minor < supportedMinor

Answer 2

这有点像黑客,但是如果你可以编辑CSS,你可以添加一个特殊的样式(没有可见的效果),你可以使用这篇文章中的技术来监听:http://www.west-wind.com /weblog/posts/478985.aspx

您需要页面中具有CSS将影响的类或ID的元素.当您的代码检测到其样式已更改时,已加载CSS.

一个黑客,正如我所说:)