Webkit - 动态创建的样式表 - 什么时候真正加载？

我有一些代码（实际上不是我的，而是光滑网格 https://github.com/mleibman/SlickGrid库）创建一个<style>元素，将其插入到 DOM 中，然后立即尝试在 document.styleSheets 集合中查找新样式表。

在 WebKit 中，这有时会失败。我实际上不知道情况是什么，但没有什么可以始终如一地重现。我想我可以通过更改代码来解决这个问题，这样对 StyleSheet 对象的检查就不会发生，直到loadstyle 元素上的事件，如下所示：

  $style = $("<style type='text/css' rel='stylesheet' />").appendTo($("head"));
  var rules = ...;// code to create the text of the rules here
  if ($style[0].styleSheet) { // IE
    $style[0].styleSheet.cssText = rules.join(" ");
  } else {
    $style[0].appendChild(document.createTextNode(rules.join(" ")));
  }
  $style.bind('load', function() {
          functionThatExpectsTheStylesheet();
  });

functionThatExpectsTheStylesheet 尝试定位实际的样式表对象，如下所示：

    var sheets = document.styleSheets;
    for (var i = 0; i < sheets.length; i++) {
      if ((sheets[i].ownerNode || sheets[i].owningElement) == $style[0]) {
        stylesheet = sheets[i];
        break;
      }
    }

但有时即使在那时，也找不到样式表对象。

所以，我的问题是这样的：

1. 是否loadevent 实际上并不能保证 styleSheet 对象可用？这是一个错误吗？
2. 如果没有，是否还有其他我可以使用的条件，或者我只需要使用超时来执行此操作？
3. 或者我绑定加载事件的方式是否存在问题，这就是我的问题？

不幸的是，动态加载 CSS 样式表仍然是一个充满浏览器怪癖的领域。在 Webkit 中，<style> and <link>元素都将fire load and error events https://bugs.webkit.org/show_bug.cgi?id=38995加载样式表时。但是，那load事件本身仅意味着样式表资源已加载，不一定已添加到document.styleSheets.

The 需要CSS https://github.com/guybedford/require-cssRequireJS 加载器通过基于 userAgent 嗅探的加载机制来处理这个问题（几乎不可能对<link>标签将触发其load事件正确）。特别是对于 Webkit，检测采用setTimeout找到当样式表 https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet对象已附加到document.styleSheets

var webkitLoadCheck = function(link, callback) {
  setTimeout(function() {
    for (var i = 0; i < document.styleSheets.length; i++) {
      var sheet = document.styleSheets[i];
      if (sheet.href == link.href)
        return callback();
    }
    webkitLoadCheck(link, callback);
  }, 10);
}

所以虽然load事件将在 Webkit 上触发，对于能够访问相应的目的而言是不可靠的StyleSheet实例。 目前唯一支持样式表的引擎load正确的事件是 Firefox 18+。

披露：我是 require-css 的贡献者

参考：

• http://pieisgood.org/test/script-link-events/ http://pieisgood.org/test/script-link-events/
• https://bugs.webkit.org/show_bug.cgi?id=56436 https://bugs.webkit.org/show_bug.cgi?id=56436
• https://bugs.webkit.org/show_bug.cgi?id=38995 https://bugs.webkit.org/show_bug.cgi?id=38995
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link