避免document.write

Question

我试图基于视口的宽度应用一个类名，以使其在加载和处理JavaScript之前不会“闪烁”。

例如，我有一个Bootstrap边栏，如果用户在移动设备上，则默认情况下要隐藏它。 如果我只是向document.ready事件添加一些逻辑，那么菜单在消失之前会显示一秒钟，这很烦人。

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

<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不应真正以这种方式使用。

是否有另一种方法可以根据窗口大小来添加in width类，而无需等到页面全部加载之后？

Answer 1

您可以使用：

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

Answer 2

不要将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>

尽管这将短暂显示错误的大小，但它应迅速调整大小，以使闪烁不明显。 我将这种逻辑放在桌面版本中，因为处理速度应该更快。

Answer 3

通过使用JavaScript处理基于屏幕大小的隐藏/显示之类的事情，您将承受很多压力。

根据屏幕大小隐藏/显示事物的标准方法是使用@media CSS规则

例如：

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

Answer 4

如果要阻止菜单最初显示，请将元素设置为

display: none;

要么

visibility: hidden;

另一方面，您不需要将其放在$（document）.ready（）;中。 如果您唯一的条件是窗口的宽度。