发表新帖
发表新帖

Is there a cross-browser onload event when clicking the back button?

后端 未结
关注
15 2319
被撕碎了的回忆
被撕碎了的回忆 2020-11-21 22:46

For all major browsers (except IE), the JavaScript onload event doesn’t fire when the page loads as a result of a back button operation — it only fires when the

相关标签:
15条回答
  • 旧巷少年郎
    2020-11-21 23:12

    OK, here is a final solution based on ckramer's initial solution and palehorse's example that works in all of the browsers, including Opera. If you set history.navigationMode to 'compatible' then jQuery's ready function will fire on Back button operations in Opera as well as the other major browsers.

    This page has more information.

    Example:

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

    I tested this in Opera 9.5, IE7, FF3 and Safari and it works in all of them.

    0 讨论(0)
  • 甜味超标
    2020-11-21 23:12

    I tried the solution from Bill using $(document).ready... but at first it did not work. I discovered that if the script is placed after the html section, it will not work. If it is the head section it will work but only in IE. The script does not work in Firefox.

    0 讨论(0)
  • 眼角桃花
    2020-11-21 23:17

    I can confirm ckramer that jQuery's ready event works in IE and FireFox. Here's a sample:

    <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>
    0 讨论(0)
  • 梦毁少年i
    2020-11-21 23:18

    Guys, I found that JQuery has only one effect: the page is reloaded when the back button is pressed. This has nothing to do with "ready".

    How does this work? Well, JQuery adds an onunload event listener.

    // http://code.jquery.com/jquery-latest.js
jQuery(window).bind("unload", function() { // ...

    By default, it does nothing. But somehow this seems to trigger a reload in Safari, Opera and Mozilla -- no matter what the event handler contains.

    [edit(Nickolay): here's why it works that way: webkit.org, developer.mozilla.org. Please read those articles (or my summary in a separate answer below) and consider whether you really need to do this and make your page load slower for your users.]

    Can't believe it? Try this:

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

    You will see similar results when using JQuery.

    You may want to compare to this one without 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>
    0 讨论(0)
  • 忘了有多久
    2020-11-21 23:20

    Bill, I dare answer your question, however I am not 100% sure with my guesses. I think other then IE browsers when taking user to a page in history will not only load the page and its resources from cache but they will also restore the entire DOM (read session) state for it. IE doesn't do DOM restoration (or at lease did not do) and thus the onload event looks to be necessary for proper page re-initialization there.

    0 讨论(0)
  • 长发绾君心
    2020-11-21 23:24

    for the people who don't want to use the whole jquery library i extracted the implementation in separate code. It's only 0,4 KB big.

    You can find the code, together with a german tutorial in this wiki: http://www.easy-coding.de/wiki/html-ajax-und-co/onload-event-cross-browser-kompatibler-domcontentloaded.html

    0 讨论(0)
 看不清?
提交回复
热议问题