对于所有主流浏览器（IE 除外），JavaScriptonload事件在页面加载时由于后退按钮操作而不会触发——它仅在页面首次加载时触发。
有人可以指出一些解决此问题的跨浏览器示例代码（Firefox、Opera、Safari、IE 等）吗？我熟悉 Firefox 的pageshow事件，但不幸的是 Opera 和 Safari 都没有实现这一点。
单击后退按钮时是否有跨浏览器的 onload 事件？
IT技术
javascript
pageload
2021-01-27 08:08:16
6个回答
伙计们，我发现 JQuery 只有一种效果：按下后退按钮时重新加载页面。这与“就绪”无关。
这是如何运作的？好吧，JQuery 添加了一个onunload事件侦听器。
// http://code.jquery.com/jquery-latest.js
jQuery(window).bind("unload", function() { // ...
默认情况下，它什么都不做。但不知何故，这似乎在 Safari、Opera 和 Mozilla 中触发了重新加载——无论事件处理程序包含什么。
[编辑（尼古拉）：这就是为什么它会这样工作：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 时您会看到类似的结果。
您可能想在没有onunload 的情况下与此进行比较
<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>
一些现代浏览器（Firefox、Safari 和 Opera，但不支持 Chrome）支持特殊的“后退/前进”缓存（我将其称为 bfcache，这是 Mozilla 发明的一个术语），当用户导航后退时会用到它。与常规（HTTP）缓存不同，它捕获页面的完整状态（包括 JS、DOM 的状态）。这允许它在用户离开页面时更快、更准确地重新加载页面。
load当页面从此 bfcache 加载时，不应触发该事件。例如，如果您在“加载”处理程序中创建了 UI，并且在初始加载时触发了一次“加载”事件，第二次从 bfcache 重新加载页面时，页面将最终以重复的 UI 元素。
这也是为什么添加“卸载”处理程序会阻止页面存储在 bfcache 中的原因（从而使其导航回更慢）——卸载处理程序可以执行清理任务，这可能会使页面处于无法工作的状态。
对于需要知道何时被导航离开/返回的页面，Firefox 1.5+ 和修复了错误 28758的 Safari 版本支持称为“pageshow”和“pagehide”的特殊事件。
参考：
我遇到了一个问题，当用户点击后退或前进时，我的 js 没有执行。我首先开始阻止浏览器缓存，但这似乎不是问题。我的 javascript 设置为在加载所有库等之后执行。我用 readyStateChange 事件检查了这些。
经过一些测试，我发现点击返回的页面中元素的 readyState 不是“已加载”而是“已完成”。添加|| element.readyState == 'complete'到我的条件语句解决了我的问题。
只是想我会分享我的发现，希望他们能帮助别人。
编辑完整性
我的代码如下所示：
script.onreadystatechange(function(){
if(script.readyState == 'loaded' || script.readyState == 'complete') {
// call code to execute here.
}
});
在上面的代码示例中，脚本变量是一个新创建的脚本元素，它已添加到 DOM 中。
好的，这是基于 ckramer 的初始解决方案和 Palehorse 的示例的最终解决方案，适用于所有浏览器，包括 Opera。如果您将 history.navigationMode 设置为 'compatible'，那么 jQuery 的就绪功能将在 Opera 以及其他主要浏览器中触发后退按钮操作。
此页面有更多信息。
例子：
history.navigationMode = 'compatible';
$(document).ready(function(){
alert('test');
});
我在 Opera 9.5、IE7、FF3 和 Safari 中对此进行了测试，并且在所有这些中都有效。
我无法使上述示例起作用。我只是想在通过后退按钮返回页面时触发某些修改过的 div 区域的刷新。我使用的技巧是在 div 区域从原始区域更改后立即将隐藏的输入字段（称为“脏位”）设置为 1。当我点击返回时，隐藏的输入字段实际上保留了它的值，所以 onload 我可以检查这个位。如果设置，我刷新页面（或只是刷新 div）。然而，在原始加载时，该位未设置，因此我不会浪费时间加载页面两次。
<input type='hidden' id='dirty'>
<script>
$(document).ready(function() {
if ($('#dirty').val()) {
// ... reload the page or specific divs only
}
// when something modifies a div that needs to be refreshed, set dirty=1
$('#dirty').val('1');
});
</script>
每当我单击后退按钮时，它都会正确触发。