我有一些代码(实际上不是我的，而是 SlickGrid 库)创建了一个 <style>元素，将其插入 DOM，然后立即尝试在 document.styleSheets 集合中查找新样式表。
在 WebKit 中，这有时会失败。我实际上不知道情况是什么，但这并不是一贯可重现的。我想我可以通过更改代码来解决这个问题，这样在 load 之前不会检查 StyleSheet 对象。样式元素上的事件，如下所示:
$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;
}
}
但有时即使在那个时候，也找不到样式表对象。
所以，我的问题是:
load事件实际上不能保证 styleSheet 对象可用？是错误吗？- 如果没有，是否有其他条件可供我使用，或者我是否只需要使用超时来执行此操作？
- 或者我绑定(bind)加载事件的方式有问题，这是我的问题吗？
最佳答案
不幸的是，动态加载 CSS 样式表仍然是一个充满浏览器怪癖的领域。在 Webkit 中，<style>和 <link>元素都将 fire load and error events加载样式表时。然而，load事件本身仅表示样式表资源已加载，不一定已添加到document.styleSheets。 .
require-css RequireJS 加载器通过基于 userAgent 嗅探来分支其加载机制来处理此问题(几乎不可能通过特征检测 <link> 标记是否会正确触发其 load 事件)。专门针对 Webkit，检测使用 setTimeout找到 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 的贡献者
引用资料:
关于javascript - Webkit - 动态创建的样式表 - 它什么时候真正加载？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17747616/