javascript - 验证是否确实加载了动态创建的 CSS

Question

我找不到一种方法来确定 CSS 是否是通过创建 <link> 动态创建的标记，然后指定 href属性确实加载了。

考虑以下示例:

var css = document.createElement("link");
css.href = "not-a-directory/not-a-css";
document.body.appendChild(css);

某些浏览器 (Firefox) 会发送 "onload"即使路径未指定现有文件，事件也会发生，但是，如果文件存在，则只有在没有违反沙箱策略的情况下才会发生。 Opera、Google Chrome 和 Safari - 都以某种方式报告了该问题，但我找不到在 JavaScript 中处理该问题的方法。

我对支持 MS Internet Explorer 不感兴趣(该项目将部署到嵌入式 WebKit/Opera 浏览器)，但如果有跨平台的方式 - 当然欢迎。

附言。 "onerror"似乎不会在任何浏览器中触发。

澄清

抱歉，我必须提供更多信息。现在我会尝试解决这个问题:

1. 我不喜欢使用其他库(如 jQuery)，但如果他们以某种方式解决了它，那是一个有效的解决方案，如果我可以看看他们是如何做到的。

2. 代码将部署到 SmartTV 上的 Opera 或 WebKit 浏览器(将其理解为严格的大小限制 + 可能需要从文件系统而不是从网络加载文件)。这就是我不能使用 XMLHttpRequest 的原因.

3. 如果您能想出一种方法来测试文本文件是否存在给定的路径(想想 iframe ， link - 也许其他元素？)这也是一个不错的选择。

Answer 1

最后，经过多次努力，我做了以下工作(但欢迎使用其他解决方案!):

使用其他 CSS 文件中不太可能出现的名称创建了一个类，比如:

.x29048723049820394 { color: #514159 }

然后在 HTML 页面中创建了一个 div 标签，我想在这里测试 CSS 是否确实加载了。创建一个 link 标签后(别忘了——你还需要指定 rel 属性，否则样式不会加载)，我设置了定时器等待div 我刚刚创建来改变颜色。颜色改变后，我假设 CSS 已经加载。或者如果时间用完了，我会放弃，假设 CSS 没有加载。

在途中我还发现，如果 CSS 文件是从文件系统加载的，即使是与请求它的原始 HTML 相同的目录，在尝试访问link 的 innerHTML 或尝试遍历文档的样式表时。