我向网站添加了深色模式，并添加了 .js 来保存用户选择的设置。它在与索引同一级别的所有页面中完美运行，但每个页面都有自己的文件夹，不会在 Firefox 中获取保存的设置。它在 Chrome 中完美运行。这是我使用的 JavaScript:
document.addEventListener('DOMContentLoaded', function () {
const checkbox = document.querySelector('.dark-mode-checkbox');
checkbox.checked = localStorage.getItem('darkMode') === 'true';
checkbox.addEventListener('change', function (event) {
localStorage.setItem('darkMode', event.currentTarget.checked);
});
});
在我使用的文件夹中的页面 <script src="../js/darkmode.js"></script> 。如何让他们选择的设置在整个页面上起作用？
最佳答案
问题出在 JavaScript 的相对包含路径上。您的 JavaScript 未包含在子页面中，因为它们位于子目录中。所以你的相对路径将会被破坏。
您的 JavaScript 代码似乎没有问题(尽管您没有包含激活暗模式的部分，所以我假设索引级页面可以正常工作)。
改变
<script src="../js/darkmode.js"></script>
至
<script src="/js/darkmode.js"></script>
(或者任何需要的绝对路径。)
您可以在 <head> 中使用 HTML 基本标签。元素来更改哪个路径充当“顶级”路径。
例如
<base href="http://www.example.com/some/sub/path/">
关于应该保存暗模式设置的 JavaScript 在 Firefox 的子文件夹中不起作用。如何解决这个问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58251600/