Question

我正在使用以下JavaScript动态加载样式表：

function set_stylesheet(name) {
    var link = document.getElementById('userstylelink');
    link.href = link.href.replace(/[^\/]+\.css$/, name + '.css');
}

有没有办法确定是否成功加载了新的CSS文件？如果失败，我希望能够应用默认样式表。

Answer 1

您可能希望在此处看到我对其他类似问题的回答： Detect and log when external JavaScript or CSS resources fail to load

基本上，您可以添加onload回调以查看文件是否已加载。（如果你当然通过JS加载）

Answer 2

最简单的方法是在分配新的href后检查link元素的styleSheet.cssText属性。

function set_stylesheet(name) { 
  var link = document.getElementById('userstylelink');     
  link.href = link.href.replace(/[^\/]+\.css$/, name + '.css'); 
  if ( link.styleSheet.cssText ) {
    //if not empty string, it was loaded
  }
  else {
    link.href = "default.css";
  }

或者，在href分配后，当资源无法加载时会触发“onerror”事件。

Answer 3

理想情况下，您可以在开头加载所有内容，然后在之间切换。

http://www.alistapart.com/articles/alternate/

http://www.thesitewizard.com/javascripts/change-style-sheets.shtml

这并没有真正回答这个问题，但我认为这种方式更受欢迎。

Answer 4

我建议通过ajax加载，检查用户pimvbd提到的响应，还要在样式表的末尾放置一个虚拟规则，用您可以检查的声明来设置隐藏元素的样式。例如，给出一个隐藏的div边界：987px并检查隐藏的div的边界是否实际上是987px。是的，它引入了对该样式和该元素的依赖。我和很多人一直在讨论这个问题，而且还没有更好的方法。希望在不久的将来在浏览器版本中获得一些关注......

Answer 5

有一个解决方案不需要javascript或检测样式表是否已加载。

您似乎也可以使用内置样式表应用默认样式，然后让动态加载的样式表覆盖默认值。如果未加载新样式表，则默认已加载并且已就位，无需再做其他任何操作。如果新样式表加载，它只会覆盖默认值并显示新样式。

如何确定链接资源是否成功加载

5 个答案: