浏览器onload事件点击后退按钮时?

对于所有主流浏览器(IE除外),当页面加载时,JavaScript onload事件不会触发后退按钮操作 - 它只会在页面首次加载时触发。

有人能指出我解决这个问题的一些示例跨浏览器代码(Firefox,Opera,Safari,IE,...)吗? 我熟悉Firefox的pageshow事件,但不幸的是,Opera和Safari都没有实现这个功能。


伙计们,我发现JQuery只有一个效果:当按下后退按钮时,页面被重新加载。 这与“ 准备好 ”无关。

这个怎么用? 那么,JQuery添加了一个onunload事件监听器。

// http://code.jquery.com/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)支持特殊的“后退/前进”缓存(我将其称为bfcache,这是由Mozilla发明的术语),当用户浏览Back时会涉及到这一点。 与常规(HTTP)缓存不同,它捕获页面的完整状态(包括JS,DOM的状态)。 这使得它可以在用户离开它的时候更快地重新加载页面。

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

这也是为什么添加“卸载”处理程序会阻止将页面存储在bfcache中(从而导​​致它更慢地导航回)的原因 - 卸载处理程序可以执行清理任务,这可能会使页面处于不可行状态。

对于需要知道何时导航离开/返回的页面,Firefox 1.5+和带有修复bug 28758的Safari版本支持称为“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没有执行。 我首先着手阻止浏览器缓存,但这似乎不成问题。 我的JavaScript被设置为在所有的库等被加载后执行。 我用readyStateChange事件检查了这些。

    经过一些测试后,我发现一个页面中已经被点击过的元素的readyState不是“加载”,而是“完整的”。 添加|| element.readyState == 'complete' || element.readyState == 'complete'给我的条件语句解决了我的问题。

    只是想我会分享我的发现,希望他们会帮助别人。

    编辑完整性

    我的代码如下所示:

    script.onreadystatechange(function(){ 
       if(script.readyState == 'loaded' || script.readyState == 'complete') {
          // call code to execute here.
       } 
    });
    

    在上面的代码示例中,脚本变量是一个新添加到DOM中的脚本元素。

    链接地址: http://www.djcxy.com/p/55733.html

    上一篇: browser onload event when clicking the back button?

    下一篇: Is there a way to keep a page from rendering once a person has logged out but hit the "back" button?