单击后退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 9FF5上工作正常。

例:

 <%@ 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>