验证动态创建的CSS是否已加载

Question

我找不到一种方法来确定通过创建一个<link>标签并指定href属性动态创建的CSS是否已经加载。

考虑以下示例：

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浏览器），但如果有跨平台的方式，当然欢迎。

PS. “onerror”似乎在任何浏览器中都不会触发。

澄清：

抱歉，我需要提供更多信息。现在我将尝试解决这个问题：

1. 我宁愿不使用其他库（如jQuery），但如果它们用某种方式解决了此问题，那就是有效的解决方案，如果我可以看一下它们是如何做到的。 2. 代码将部署到SmartTV上的Opera或WebKit浏览器（请将其视为严重的大小限制+可能需要从文件系统而不是从网络加载文件）。这就是为什么我不能使用XMLHttpRequest的原因。 3. 如果您能想出一种测试给定路径的文本文件是否存在的方法（考虑iframe、link-也许还有其他元素？），那么这也是一个好选择。

- user797257

---

检查Firebug以查看动态生成的CSS是否已正确加载。 - dreamweiver

Answer 1

最终，在经过了很多努力之后，这是我所做的（但欢迎提供其他解决方案！）：

创建一个类名，在其他CSS文件中不太可能出现，比如说：

.x29048723049820394 { color: #514159 }

然后在HTML页面中创建了一个

标签，以测试CSS是否已经加载。创建标签（不要忘记-您还需要指定属性，否则样式将不会加载），设置计时器等待我刚刚创建的

改变颜色。颜色改变后，我会认为CSS已经加载。或者如果时间耗尽，我会放弃，认为CSS没有加载。

在此过程中，我还发现，如果从文件系统加载CSS文件，即使与请求它的原始HTML位于同一目录中，也会遇到安全相关错误，当尝试访问的innerHTML或尝试迭代文档的样式表时。

- user797257

Answer 2

据我所知，没有一种优雅可靠的方法来检测它，所有的方法都或多或少是hack。

这是我脑海中的一个hack：

    $.ajax({
        url: "/style.css",
        dataType: "text",
        success: function (cssString) {
            // css file exists, and was loaded correctly.
            $("head").append($("<style/>").text(cssString));
        },
        error: function (e) {
            // css file did not exist, we can check status code with e.status (404 etc)
        }
    });

我们基本上使用ajax将css文件作为文本加载，然后将加载的数据附加到dom上。这样我们可以可靠地检测故障，但除此之外，它是一个完全的hack。你很可能会看到未经样式修饰的内容。我不确定我会使用它，但我想把它和所有其他hack一起分享，可能会有趣 :-)

- Strille

Answer 3

如果您知道应该加载的特定类名，则可以使用JavaScript循环遍历所有样式表和类名，以查看它是否已加载。

- David