单击后退按钮时是否存在跨浏览器 onload 事件？

javascript pageload

2022-08-30 01:33:00

对于所有主流浏览器（IE 除外），JavaScript 事件不会在页面加载时作为后退按钮操作的结果触发 — 它仅在首次加载页面时触发。onload

有人可以给我指出一些示例跨浏览器代码（Firefox，Opera，Safari，IE等）来解决这个问题吗？我熟悉Firefox的事件，但不幸的是，Opera和Safari都没有实现这一点。pageshow

答案 1

伙计们，我发现JQuery只有一个效果：按下后退按钮时，页面会重新加载。这与“准备就绪”无关。

这是如何工作的？好吧，JQuery添加了一个onunload事件侦听器。

// http://code.jquery.com/jquery-latest.js
jQuery(window).bind("unload", function() { // ...

默认情况下，它不执行任何操作。但不知何故，这似乎触发了Safari，Opera和Mozilla中的重新加载 - 无论事件处理程序包含什么。

[edit（Nickolay）：这就是为什么它以这种方式工作：webkit.org，developer.mozilla.org。请阅读这些文章（或我在下面单独回答中的摘要），并考虑您是否真的需要这样做，并使用户的页面加载速度变慢。

不敢相信？试试这个：

<body onunload=""><!-- This does the trick -->
<script type="text/javascript">
    alert('first load / reload');
    window.onload = function(){alert('onload')};
</script>
<a href="http://stackoverflow.com">click me, then press the back button</a>
</body>

使用 JQuery 时，您将看到类似的结果。

您可能希望在不卸载的情况下与此进行比较

<body><!-- Will not reload on back button -->
<script type="text/javascript">
    alert('first load / reload');
    window.onload = function(){alert('onload')};
</script>
<a href="http://stackoverflow.com">click me, then press the back button</a>
</body>

答案 2

一些现代浏览器（Firefox，Safari和Opera，但不是Chrome）支持特殊的“后退/前进”缓存（我称之为bfcache，这是Mozilla发明的一个术语），当用户导航Back时涉及。与常规（HTTP）缓存不同，它捕获页面的完整状态（包括JS，DOM的状态）。这允许它更快，更准确地重新加载页面，就像用户离开它一样。

从此 bfcache 加载页面时，不应触发该事件。例如，如果在“load”处理程序中创建 UI，并且 “load” 事件在初始加载时触发了一次，第二次在从 bfcache 重新加载页面时触发，则页面最终将包含重复的 UI 元素。load

这也是为什么添加“unload”处理程序会阻止页面存储在bfcache中（从而使导航回的速度变慢）的原因 - 卸载处理程序可以执行清理任务，这可能会使页面处于不可行的状态。

对于需要知道何时被导航/返回的页面，Firefox 1.5+和修复错误28758的Safari版本支持称为“pageshow”和“pagehide”的特殊事件。

引用：

Webkit： http://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/
火狐：https://developer.mozilla.org/En/Using_Firefox_1.5_caching。
铬： https://code.google.com/p/chromium/issues/detail?id=2879