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"似乎没有在任何浏览器中触发。

澄清

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

我不想使用其他库（比如jQuery），但如果他们以某种方式解决了它，那么这是一个有效的解决方案，如果我可以看看他们是如何做到的。
代码将被部署到SmartTV上的Opera或WebKit浏览器（读取它作为严重的大小限制+可能需要从文件系统而不是从网络加载文件）。这就是我无法使用XMLHttpRequest。
如果你能想出一种方法来测试文本文件是否存在给定路径（想想iframe，link - 也许是其他元素？）这也是一个不错的选择。< / p>

Answer 1

最后，经过多次努力，这就是我所做的（但欢迎替代解决方案！）：

使用其他CSS文件中不太可能发生的名称创建一个类，例如：

.x29048723049820394 { color: #514159 }

然后在HTML页面中创建了一个div标记，我想测试CSS是否确实加载了。创建link标记后（不要忘记 - 您还需要指定rel属性，否则样式将无法加载），我将计时器设置为等待div我刚创建改变颜色。颜色改变后，我认为CSS已加载。或者如果时间用完了，我会放弃，假设CSS没有加载。

在我发现的方式上，如果CSS文件是从文件系统加载的，甚至是与请求它的原始HTML相同的目录，当你试图访问它时，你将遇到与安全相关的错误。 innerHTML的{{1}}或尝试遍历文档的样式表。

Answer 2

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

Answer 3

我的理解是，没有优雅可靠的方法来检测它，一切都或多或少是黑客攻击。

这是我头脑中的黑客攻击：

    $.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。通过这种方式，我们可以可靠地检测出故障，但除此之外，这是完全黑客攻击。你最有可能获得一些没有风格的内容。我不确定我是否会使用它，但我认为将它与其他所有黑客一起扔出去可能会很有趣： - ）

验证动态创建的CSS确实已加载

3 个答案: