Webkit - 动态创建样式表 - 什么时候真的加载？ [英] Webkit - dynamically created stylesheet - when does it really load?

问题描述

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

I have some code (it's actually not mine but the SlickGrid library) that creates a <style> element, inserts it into the DOM, then immediately tries to find the new stylesheet in the document.styleSheets collection.

在WebKit中有时会失败。我实际上并不知道情况如何，但这并不重要。我想我可以通过更改代码来解决这个问题，所以在样式元素上的加载事件之前，StyleSheet对象的检查不会发生，如下所示：

In WebKit this sometimes fails. I don't actually have any idea what the circumstances are, but it's nothing that's consistently reproducible. I figured I could work around it by changing the code so the check for the StyleSheet object doesn't happen until the load event on the style element, like so:

  $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尝试查找实际样式表对象，如下所示：

and functionThatExpectsTheStylesheet attempts to locate the actual stylesheet object like so:

    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;
      }
    }

但有时甚至在这一点上，样式表对象是没有找到。

but sometimes even at that point, the stylesheet object is not found.

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

So, my question is this:

1. code> load 事件其实不保证styleSheet对象可以使用？是否是一个错误？


2. 如果没有，还有另一个条件，我可以使用，或者我只需要使用超时来做这个？


3. 或有没有问题，我绑定的加载事件的方式，这是我的问题？

1. Does the load event in fact not guarantee that the styleSheet object will be available? Is it a bug?
2. If not, is there another condition that I can use or do I just need to do this using timeouts?
3. Or is there some problem with the way I'm binding the load event and that's my problem?

推荐答案

p>动态加载CSS样式表仍然是填充浏览器怪癖的区域，不幸的是。在Webkit中，< style> 和< link> / / code>和错误加载事件加载样式表时。但是，加载事件本身只意味着样式表资源已经被加载，不一定已经被添加到 document.styleSheets 。

Dynamically loading CSS stylesheets is still an area filled with browser quirks, unfortunately. In Webkit, <style> and <link> elements will both fire load and error events when loading stylesheets. However, the load event itself means only that the stylesheet resource has been loaded, not necessarily that it has been added to document.styleSheets.

require-css <一个> RequireJS加载器通过基于userAgent嗅探分支其加载机制来处理这个问题（几乎不可能对特征检测是否< link> 标签将触发其正确加载事件）。特别是对于Webkit来说，检测方法使用 setTimeout 来查找 StyleSheet 对象已附加到 document.styleSheets

The require-css RequireJS loader deals with this issue by branching its loading mechanism based on userAgent sniffing (it is nearly impossible to feature-detect whether or not the <link> tag will fire its load event properly). Specifically for Webkit, the detection resorts to using setTimeout to find when the StyleSheet object has been attached to 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);
}

所以当加载事件将在Webkit上启动，为了能够访问相应的 StyleSheet 实例，它是不可靠的。
目前唯一支持样式表正确加载事件的引擎是Firefox 18 +。

So while the load event will fire on Webkit, it is unreliable for the purposes of being able to access the corresponding StyleSheet instance. Currently the only engine that supports stylesheet load events properly is Firefox 18+.

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

Disclosure: I am a contributor to require-css

参考文献：

• http://pieisgood.org/test/script-link-events/


• https://bugs.webkit.org /show_bug.cgi?id=56436


• https://bugs.webkit.org/show_bug.cgi?id=38995


• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

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

这篇关于Webkit - 动态创建样式表 - 什么时候真的加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！