3

我找不到一种方法来确定 CSS 是否确实已加载，该 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 浏览器），但如果有跨平台方式 - 当然，这是受欢迎的。

PS。"onerror"似乎没有在任何浏览器中触发。

澄清

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

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

  2. 该代码将部署到 SmartTV 上的 Opera 或 WebKit 浏览器（将其解读为严重的大小限制 + 可能需要从文件系统而不是从网络加载文件）。这就是为什么我不能使用XMLHttpRequest.

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

4

3 回答 3

1

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

创建了一个在其他 CSS 文件中不太可能出现的名称的类，例如：

.x29048723049820394 { color: #514159 }

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

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

于 2013-05-07T10:48:51.717 回答
0

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

于 2013-05-06T14:52:24.113 回答
0

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

这是我的想法：

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

于 2013-05-06T14:59:04.473 回答