链接元素加载

无论如何，有没有办法监听 onload 事件<link>元素？

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。

Update:

是否有一个想法可以注入一个隐藏的<iframe>，添加<link>到头来听window.onloadiframe 中的事件？它应该在加载 css 时触发，但它可能不能保证它加载在顶部窗口中......

如今，所有现代浏览器都支持链接标签上的 onload 事件。所以我会防范黑客行为，例如创建一个 img 元素并设置 onerror：

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

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

小更新：

正如迈克尔指出的，有一些浏览器例外，我们总是希望对其应用黑客攻击。在咖啡脚本中：

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