单击后退button时是否存在跨浏览器onload事件？
对于所有主stream浏览器（IE除外），当页面加载时，JavaScript onload事件不会触发，因为后退button操作 – 仅在页面首次加载时触发。
有人可以指点我一些跨浏览器的代码（Firefox，Opera，Safari，IE，…）来解决这个问题吗？ 我熟悉Firefox的pageshow事件，但不幸的是Opera和Safari都没有实现这个function。
伙计们，我发现JQuery只有一个效果：按下后退button时页面被重新加载。 这与“ 准备好 ”无关。
这个怎么用？ 那么，JQuery添加了一个onunload事件监听器。
// jquery-latest.js jQuery(window).bind("unload", function() { // ...
默认情况下，它什么都不做。 但不知何故，这似乎触发在Safari，Opera和Mozilla的重新加载 – 无论事件处理程序包含。
[ 编辑（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时你会看到类似的结果。
你可能想比较这个没有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）支持特殊的“后退/前进”caching（我将其称为bfcache，这是Mozilla发明的术语），当用户浏览Back时会涉及到这一点。 与常规（HTTP）caching不同，它捕获页面的完整状态（包括JS，DOM的状态）。 这使得它可以在用户离开的时候更快速地重新加载页面。
从这个bfcache加载页面时， load事件不应该触发。 例如，如果您在“加载”处理程序中创build了用户界面，并且在初始加载时触发了“加载”事件一次，并且第二次从bfcache重新加载页面时，页面将以重复的UI元素。
这也是为什么添加“卸载”处理程序会阻止页面被存储在bfcache中（因此导致它慢回到） – 卸载处理程序可能执行清理任务，这可能会使页面处于不可行状态。
对于需要知道什么时候浏览/返回的页面，Firefox 1.5+和Safari 28758修补程序的版本支持名为“pageshow”和“pagehide”的特殊事件。
参考文献：
- Webkit： http : //webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/
- Firefox： https ： //developer.mozilla.org/En/Using_Firefox_1.5_caching 。
- Chrome： https ： //code.google.com/p/chromium/issues/detail？id = 2879
我遇到了一个问题，当用户点击后退或前进时，我的js没有执行。 我首先着手阻止浏览器caching，但这似乎不成问题。 我的JavaScript被设置为在所有的库等被加载后执行。 我用readyStateChange事件检查了这些。
经过一些testing后，我发现在被点击的页面中，元素的readyState不是“加载”，而是“完整的”。 添加|| element.readyState == 'complete' || element.readyState == 'complete'给我的条件语句解决了我的问题。
只是想我会分享我的发现，希望他们会帮助别人。
编辑完整性
我的代码如下所示：
script.onreadystatechange(function(){ if(script.readyState == 'loaded' || script.readyState == 'complete') { // call code to execute here. } });
在上面的代码示例中，脚本variables是一个新添加到DOM的脚本元素。
好的，这是基于ckramer的最初解决scheme和palehorse的例子的最终解决scheme，适用于所有浏览器，包括Opera。 如果您将history.navigationMode设置为“compatible”，那么jQuery的ready函数将在Opera以及其他主要浏览器上触发Backbutton操作。
这个页面有更多的信息 。
例：
history.navigationMode = 'compatible'; $(document).ready(function(){ alert('test'); });
我在Opera 9.5，IE7，FF3和Safari中testing了它，它在所有这些方面都有效。
我无法得到上面的例子工作。 我只是想通过后退button返回到页面时触发某些修改后的div区域的刷新。 我使用的技巧是一旦div区域从原始区域改变，将隐藏的input字段（称为“脏位”）设置为1。 隐藏的input字段实际上保留其价值，当我点击回来，所以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>
只要我点击后退button，它会正确触发。
如果我没有记错，那么添加一个unload（）事件意味着页面不能被caching（在向前/向后caching中） – 因为状态改变/可能在用户导航时改变。 因此，通过浏览历史logging对象来恢复页面的最后一个状态是不安全的。
我认为这将是“onunload”，而不是页面加载，因为我们不是在打“回”时发射事件？ $ document.ready（）是用于页面加载所需的事件，无论你如何到达该页面（即redirect，直接打开浏览器到URL等），而不是当点击“返回”时，除非你在说话当它再次加载时，在上一页上触发的内容。 而且我不确定页面没有被caching，因为我发现Javascript仍然是，即使$ document.ready（）被包含在其中。 编辑我们的脚本时，我们必须按Ctrl + F5，每当我们修改它们，我们要testing结果在我们的页面。
$(window).unload(function(){ alert('do unload stuff here'); });
当你点击“返回”并卸载当前页面时，你会想要一个onunload事件，并且当用户closures浏览器窗口时也会触发。 这听起来更像是所期望的，即使我与$ document.ready（）的响应数量超过了。 基本上不同之处在于当前页面正在closures的事件触发事件，或者在加载时单击“上一步”时加载的事件。 testing在IE 7罚款，不能说其他浏览器，因为他们不允许我们在哪里。 但是这可能是另一种select。
我可以确认ckramer，jQuery的ready事件在IE和FireFox中工作。 这是一个示例：
<html> <head> <title>Test Page</title> <script src="jquery-latest.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var d = new Date(); $('#test').html( "Hi at " + d.toString() ); }); </script> </head> <body> <div id="test"></div> <div> <a href="http://www.google.com">Go!</a> </div> </body> </html>
对于不想使用整个jquery库的人，我提取了独立代码中的实现。 它只有0.4 KB大。
您可以在wiki中find代码和德语教程： http : //www.easy-coding.de/wiki/html-ajax-und-co/onload-event-cross-browser-kompatibler-domcontentloaded.html
jQuery的 ready事件就是为了这个问题而创build的。 你可能想深入实施，看看下面发生了什么。
比尔，我敢回答你的问题，但是我不能100％肯定我的猜测。 我想其他的IE浏览器在将用户带到历史页面时不仅会从caching中加载页面及其资源，而且还会恢复整个DOM（读会话）状态。 IE不执行DOM恢复（或者至less没有做），因此onload事件对于在那里进行适当的页面重新初始化来说是必要的。
我使用$（document）.ready …从Bill试过了解决scheme，但起初它不工作。 我发现如果脚本放在html部分之后，它将不起作用。 如果它是头部分，它将工作，但只在IE浏览器。 该脚本在Firefox中不起作用。
好的，我试过了，它可以在Firefox 3，Safari 3.1.1和IE7中运行，但不能在Opera 9.52中运行。
如果您使用下面显示的示例（基于palehorse的示例），则会在首次加载页面时popup警告框。 但是，如果您然后转到另一个URL，然后点击“返回”button返回到此页面，则不会在Opera中popup警告框（但在其他浏览器中则会popup）。
无论如何，我觉得现在已经够接近了。 感谢大家！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <meta http-equiv="expires" content="0"> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready( function(){ alert('test'); } ); </script> </head> <body> <h1>Test of the page load event and the Back button using jQuery</h1> </body> </html>
卸载事件不能正常工作在IE 9上。我尝试了加载事件（onload（）），它在IE 9和FF5上工作正常。
例：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> jQuery(window).bind("load", function() { $("[name=customerName]").val(''); }); </script> </head> <body> <h1>body.jsp</h1> <form action="success.jsp"> <div id="myDiv"> Your Full Name: <input name="yourName" id="fullName" value="Your Full Name" /><br> <br> <input type="submit"><br> </div> </form> </body> </html>
