避免 document.write

Question

我正在尝试根据视口的宽度应用 class 名称，这样它就不会 "flash" 在 JavaScript 被加载和处理之前。

例如，我有一个 Bootstrap 边栏，如果用户使用移动设备，我想默认隐藏它。如果我只是向 document.ready 事件添加一些逻辑，那么菜单在消失前会显示一瞬间，这很烦人。

为了避免这种行为，我使用 document.write 为我的边栏创建了开放标签：

<script type="text/javascript">
  // Prevent flicker of menu before collapsing on small screens
  if (window.outerWidth < 768) {
    document.write('<aside class="collapse" id="primary-sidebar">');
  } else {
    document.write('<aside class="collapse in width" id="primary-sidebar">');
  }
</script>
...
</aside>

虽然这解决了问题，但我确实在 Firefox 中收到关于不平衡树的警告，而且我读到 document.write 不应该以这种方式使用。

是否有另一种方法可以在 window 大小的基础上添加 in width class 而无需等到页面全部加载完毕？

Answer 1

您可以使用：

var aside = document.querySelector("#primary-sidebar");
if (window.outerWidth < 768) {
    aside.className = "collapse";
} else {
    aside.className = "collapse in width";
}

Answer 2

使用 JavaScript 来根据屏幕尺寸处理诸如 hiding/showing 之类的事情会给自己带来很大的压力。

根据屏幕尺寸 hide/show 的标准方法是使用 @media CSS rule

例如：

@media (min-width: 768px) {
    #primary-sidebar {
        display:none;
    }
}

Answer 3

如果您不想在一开始就显示您的菜单，请将该元素设置为

display: none;

或

visibility: hidden;

另一方面，您不需要将其放入 $(document).ready();如果您唯一的条件是 window.

的宽度

Answer 4

不要将 Javascript 放在 document.ready 中，而是将 <script> 标记紧跟在相关元素之后。

<aside class="collapse" id="primary-sidebar">
...
</aside>
<script type="text/javascript">
if (window.outerwidth >= 768) {
    document.getElementById("primary-sidebar").className = "collapse in width";
}
</script>

虽然这会短暂显示错误的大小，但它的大小调整速度应该很快，闪烁应该不会引起注意。我把这个逻辑放在桌面版本中，因为处理速度应该更快。

避免 document.write

Avoiding document.write

javascript

html

document.write