Firefox 不遵守 rel=stylesheet 链接的“禁用”属性

Question

我有一个需要加载两个主题的网站。第二个主题可以由用户打开/关闭。我目前正在通过在链接中使用disabled 标记来完成此操作，如下所示：

<link rel="stylesheet" href="{{main css}}">
<link rel="stylesheet" title="theme-white" href="{{2nd theme css}}" disabled>

然后我在 JavaScript 中切换 disabled。

这在 Safari (Mac)、Chrome (Mac/Windows) 和 IE10 中运行良好。但是，Firefox（Mac 和 Windows）似乎在页面加载时忽略了 disabled 标记，并在初始加载时显示第二个主题（因为它是第二个加载的）。但是，当我手动切换 disabled 时，Firefox 会响应标签并开始打开/关闭第二个主题。

我怎样才能实现这个目标？

Answer 1

我找到了一种似乎在所有浏览器中都可以使用的解决方法。这似乎不是最好的方法，但我想分享。

由于某些原因，这并不理想，但我尝试使其简化并且没有像 jQuery 这样的任何外部库依赖项，因为这需要放置在您的 head 标记中，并且您可能还没有加载您的 JS 库在这一点上.

<script>
    window.onload = function() {
        var path  = "css";
        var style   = document.createElement( 'link' );
        style.rel   = 'stylesheet';
        style.href   = '/your/css/url.css';
        document.getElementsByTagName( 'head' )[0].appendChild( style );
        style.disabled = true;
    };
</script>

注意：Firefox 似乎只响应 disabled 标记，如果它在添加到 DOM 后应用于样式表。我仍然觉得我错过了什么，因为这看起来很疯狂。

因此，如果您将style.disabled = true; 放在 之前将样式添加到文档中，那么 Firefox 将无法识别样式表的禁用状态。

Answer 2

这在 Firefox 68 中已修复。您现在可以在还包含 ref=stylesheet 属性值的 <link> 元素上设置 disabled 属性。这将阻止浏览器加载该样式表，直到 disabled 属性设置为 false 或通过 JavaScript 或其他方法删除。

这使 Firefox 与 Chrome、Edge、Safari 对这一功能的支持保持一致。

有关 MDN 的更多信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Attributes

Bugzilla 报告：https://bugzilla.mozilla.org/show_bug.cgi?id=1281135

Answer 3

在这里聚会迟到了，但我刚刚在 Firefox 中也遇到了这个问题。原来它与 disabled 属性如何通过 Javascript 应用于样式表有关。

请看下面的代码，假设有一些触发器在两个样式表之间交换禁用状态。第一个功能是我首先尝试的，而后者最终对我有用。

var myStyles = document.getElementById('my-default-style');
var myOtherStyles = document.getElementById('my-other-style');

function thisFailsInFirefox() {
  myStyles.setAttribute('disabled', true);
  myOtherStyles.removeAttribute('disabled');
}

function thisWorksInFirefox() {
  myStyles.disabled = true;
  myOtherStyles.disabled = false;
}

thisWorksInFirefox 函数似乎起到了作用，它保持了 Chrome / Safari / Edge 中的功能，同时使 Firefox 的行为与其匹配。

Answer 4

主题样式表中的所有内容都可以以类为前缀。例如，如果您的主题 css 中有以下内容：

h1 {color: red;}
h2 {color: green;}

变成这样：

.theme-white h1 {color: red;}
.theme-white h2 {color: green;}

然后，要切换您的主题，您可以使用以下命令：

if (show theme) {
    $('body').addClass('theme-white');
} else {
    $('body').removeClass('theme-white');
}