javascript - Ctrl + F5 导致页面跳转，但 F5 不会

Question

我在我客户的一个网站页面中的 Firefox 浏览器中遇到了这种奇怪的行为。

当我清除缓存并刷新时，或者使用 Ctrl+F5 刷新页面时，页面的格式会失真。

在此之后，如果我按 F5(而不是 Ctrl+F5)，页面会立即正确加载。

我尝试根据链接 here 对浏览器进行故障排除和重置和 here .

我也在网上和firefox的各种论坛上搜索过，都没有解决。

Firefox 版本是 41，但我认为问题出在所有版本上。

Chrome 运行良好。

有问题的 URL 是 here .

以下屏幕截图也有助于理解我的问题。

请帮忙!

Answer 1

你有 <div id="page">其宽度在 CSS 中设置为 911px。 然后你有一个脚本，它在 $(document).ready() 上将其宽度更改为 100%事件。

现在，在所有同步 JavaScript 文件和文档本身加载完成之前，就绪事件不会触发。在准备好的缓存中，JavaScript 文件将加载得更快，因此就绪事件将触发得更快，在您注意到之前将页面宽度设置为 100%。

但是，在空缓存中，JavaScript 文件将需要更长的时间来加载。在触发 ready 事件之前，浏览器可能会呈现页面的某些部分。事实上，第二个屏幕截图显示了“正在从...传输数据”状态，这(很可能)意味着页面尚未加载。

解决方法:

你想防止页面在加载时跳动，你需要通过 JavaScript 设置页面宽度，你不能等到文档准备好/页面加载。一种解决方案是内联更改页面宽度的 JavaScript 代码。首先定义这些 CSS 类:

#page { width: 911px; }
#fullwidth + #page { width: 100%; }

然后插入几行内联 JavaScript:

<script>
if (mustBeFullWidth) {
    document.write('<div id="fullwidth"></div>');
}
</script>
<div id="page">
    <!-- content -->
</div>