检测样式表是否无法加载(在 Firefox 上不起作用）

Detect if stylesheets fail to load (not working on Firefox)

本文关键字：Firefox 不起作用 加载 样式 是否 检测      更新时间：2023-09-26

我从不同来源拼凑了一个脚本，这有助于我在样式表加载失败时放置一些回退（特别是对我来说，Pictos服务器并不总是可靠的）。

这很好用，但由于某种原因在 Firefox 上失败，它不处理 if 语句中的任何内容。我尝试通过 JSHint 运行它，但没有出现任何严重的事情。

有什么想法吗？

$(document).ready(function(){
    $.each(document.styleSheets, function(i,sheet){
      if(sheet.href==='http://get.pictos.cc/fonts/357/9') {
        var rules = sheet.rules ? sheet.rules : sheet.cssRules; // Assign the stylesheet rules to a variable for testing
        $('body').addClass('pictos-working');
        $('.pictos-fallback').hide(); // Hide fallbacks
        // If the stylesheet fails to load...
        if (rules.length === 0) {
            $('.pictos').hide(); // Hide Pictos tags so we don't get random letters
            $('body').removeClass('pictos-working'); // Remove 'working' class
            $('.pictos-fallback').show(); // Show fallbacks
        }
     }
    });
});​

样式表检测方法不可靠。 当样式表源自其他域时，由于同源策略，cssRules null。

检查是否应用了样式表中的规则，而不是通过 cssRules 对象检测是否存在 css 规则：

if ($('selector').css('property') === 'expectedvalue') {
    // Loaded
} else {
    // Not loaded.
}

只是一些可能会有所帮助的改进建议：

为什么是嵌套的 if？既然你只有两种情况，那就使用 if then else..您确定 cssRules 在文件不加载时为零吗？也许有一些标题或元数据可以加载。你在哪里找到这个属性？

我刚刚发现的东西：http://www.quirksmode.org/dom/w3c_css.html

相关文章：