代码之家 › 专栏 › 技术社区 › Frank Schmitt

在什么情况下,$(document).ready在单击后退按钮时触发?[副本]

document-ready back-button jquery

Frank Schmitt · 技术社区 · 14 年前

对于所有主流浏览器(IE除外),JavaScript onload 事件不会在页面加载时触发,因为“后退”按钮操作只是在第一次加载页面时触发。

pageshow 但不幸的是,Opera和Safari都没有实现这一点。

0 回复 | 直到 7 年前

118

Nickolay 14 年前

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

这是怎么回事?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>

Nickolay 9 年前

这个 load 从该缓存加载页时不应触发事件。例如,如果您在“load”处理程序中创建了UI,并且在初始加载时触发了一次“load”事件,第二次从bfcache重新加载页面时,页面将以重复的UI元素结束。

这也是为什么添加“unload”处理程序会阻止页面存储在bfcache中(从而使返回到的速度变慢)--unload处理程序可能会执行清理任务,这可能会使页面处于无法工作的状态。

对于需要知道何时离开/返回的页面,Firefox 1.5+和带有修复程序的Safari版本 bug 28758 称为“pageshow”和“pagesupport”的特殊事件。

参考文献:

Brian Heese 9 年前

我遇到了一个问题,当用户单击后退或前进时,我的js没有执行。我首先开始阻止浏览器缓存,但这似乎不是问题所在。我的javascript设置为在加载所有库等之后执行。已检查这些事件的readystatei更改。

经过一些测试,我发现在点击back的页面中,元素的readyState不是“loaded”,而是“complete”。添加 || element.readyState == 'complete' 我的条件语句解决了我的问题。

我只是想和大家分享我的发现,希望他们能帮助别人。

为完整性编辑

我的代码如下:

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

mplungjan 9 年前

好的,这是一个基于ckramer的初始解决方案和palehorse的示例的最终解决方案,它适用于所有浏览器,包括Opera。如果你设置历史记录.导航模式为了“兼容”,jQuery的ready函数将在Opera和其他主流浏览器中启动Back按钮操作。

more information .

例子:

history.navigationMode = 'compatible';
$(document).ready(function(){
  alert('test');
});

thorie 12 年前

我无法让上面的例子起作用。我只是想在通过back按钮返回页面时触发某些修改的div区域的刷新。我使用的技巧是,一旦div区域与原来的不同,就将一个隐藏的输入字段(称为“脏位”)设置为1。当我单击back时,隐藏的输入字段实际上保留了它的值,所以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>

只要我点击后退按钮,它就会正常触发。

arcijsg arcijsg 15 年前

如果我没记错的话,那么添加unload()事件意味着页面不能被缓存(在前向/后向缓存中)-因为当用户离开时,它的状态会改变/可能会改变。所以-通过浏览历史对象返回页面时,还原页面的最后一秒状态是不安全的。

Lightness Races in Orbit Shash316 13 年前

我想这应该是“onunload”,而不是页面加载,因为我们不是在谈论在点击“Back”时触发事件吗?$文件准备就绪()适用于页面加载时所需的事件,无论您如何到达该页面(即重定向、直接打开浏览器至URL等),而不是单击“上一步”时,除非您正在讨论再次加载前一页时在上一页上激发的内容。我不确定页面是否被缓存,因为我发现Javascripts仍然被缓存,即使$文件准备就绪()包含在其中。我们不得不在编辑脚本时按Ctrl+F5,每当我们修改脚本时就会出现此事件,我们希望在页面中测试结果。

$(window).unload(function(){ alert('do unload stuff here'); });

是在点击“Back”并卸载当前页面时onunload事件所需的,并且在用户关闭浏览器窗口时也会触发。这听起来更像是人们所期望的,即使我的人数比他们多$文件准备就绪()回应。基本上,区别在于当前页面关闭时触发的事件和加载时单击“后退”时加载的事件。在IE7测试很好,不能为其他浏览器说话,因为他们不允许我们在那里。但这可能是另一种选择。

tothemario 13 年前

我可以确认ckramer jQuery的ready事件在IE和FireFox中工作。下面是一个示例:

<html>
<head>
    <title>Test Page</title>
    <script src="http://code.jquery.com/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>

j0k spurrchalifax 10 年前

http://www.easy-coding.de/wiki/html-ajax-und-co/onload-event-cross-browser-kompatibler-domcontentloaded.html

ckramer 16 年前

jQuery's ready 事件就是为这类问题创建的。您可能需要深入研究实现,看看在幕后发生了什么。

Sergey Ilinsky 16 年前

Johann 14 年前

我用$(document)尝试了Bill的解决方案。准备好了。。。但一开始并不奏效。我发现如果将脚本放在html部分之后,它将无法工作。如果它是头部分,它将工作,但只有在IE。脚本不工作,在Firefox。

Bill 16 年前

我在Firefox 1.3和7.3中试过了不
如果使用下面所示的示例(基于palehorse的示例),则在页面首次加载时会弹出一个警报框。但是如果你转到另一个URL,然后点击Back按钮返回到这个页面,你在Opera中不会弹出警告框(但是在其他浏览器中会弹出警告框)。

<!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>

Andro Selva Yannick Chaze 11 年前

卸载事件在IE9上无法正常工作。我用loadevent(onload())试过了,效果很好 工业工程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>

bafsar 6 年前

我用了一个html模板。在此模板的自定义.js文件中,有这样一个函数:

    jQuery(document).ready(function($) {

       $(window).on('load', function() {
          //...
       });

    });

所以,我尝试了这个方法,效果很好:

    jQuery(document).ready(function($) {
       //...
    });

   //Window Load Start
   window.addEventListener('load', function() {
       jQuery(document).ready(function($) {
          //...
       });
   });

现在,我有2个“就绪”功能,但它不给任何错误和页面工作得很好。

注意:jquery版本是3.3.1,migrate版本是3.0.0