logo标签列表

点击后退按钮时是否存在跨浏览器的onload事件？

javascriptpageload
200

对于所有主要浏览器（除IE外），当页面由于返回按钮操作而加载时，JavaScript的onload事件不会触发 - 它只在页面第一次加载时触发。

有人可以给我指出一些可解决这个问题的跨浏览器示例代码（Firefox，Opera，Safari，IE等）吗？我熟悉Firefox的pageshow事件，但不幸的是，Opera和Safari都没有实现此功能。

6
这不是问题——这样可以使用户按返回按钮时网页加载得更快。详情请见下文的回答。本文中提出的解决方法会让用户感到更加烦恼，因为前进和后退操作会变得更慢。 - Nickolay
2
@romkyns：您的评论与此问题无关。当浏览器不恢复JS/DOM状态时，它们确实会触发加载事件。 - Nickolay
iOS 5+ 历史返回按钮问题解决方法在这里：https://dev59.com/RGct5IYBdhLWcg3wmOZN#12652160 - Mladen Janjetovic
16个回答
2

我尝试了Bill的解决方案，使用了$(document).ready...，但一开始它并没有起作用。我发现如果脚本放在HTML部分之后，它将不起作用。如果放在head部分，它只能在IE中工作。该脚本在Firefox中无法工作。

2

Bill，我敢回答你的问题，但是我的猜测不是100%确定。我认为除了IE浏览器以外，其他浏览器在将用户带到历史记录页面时，不仅会从缓存中加载页面和其资源，还会恢复整个DOM（阅读会话）状态。IE不进行DOM恢复（或至少没有这样做），因此onload事件似乎对于在那里正确重新初始化页面是必要的。

1

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

我使用了一个html模板。在这个模板的custom.js文件中，有一个像这样的函数：

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

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

    });

但是当我从其他页面返回时，这个函数不起作用。
所以，我尝试了这个方法，它起作用了：
    jQuery(document).ready(function($) {
       //...
    });

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

现在，我有两个“ready”函数，但它没有给出任何错误，页面运行得非常好。尽管如此，我必须声明它已经在Windows 10 - Opera v53和Edge v42上测试过，但没有在其他浏览器上进行测试。请注意：jQuery版本为3.3.1，迁移版本为3.0.0。
1

好的，我尝试了一下，在Firefox 3、Safari 3.1.1和IE7中可以运行，但在Opera 9.52中不行。
如果你使用下面所示的示例（基于palehorse的示例），当页面首次加载时会弹出一个警告框。但是，如果你转到另一个URL，然后点击“返回”按钮返回到这个页面，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>
0
我正在构建一个基于file:///协议的网站。（Firefox 116.0.1 64位）所以这可能不适用于很多情况：
但是，当我使用返回按钮到达一个需要运行脚本的页面时，它会失败。点击链接到该页面不会失败。
失败的定义： 浏览器标签会锁定并变得无响应，需要关闭。浏览器的返回、前进和停止按钮都无法点击。
当我尝试使用onunload=""时，同样的失败发生了...
但是，当我为onunload设置一个真正的函数，并让它调用在body标签的onload属性中描述的函数时，它开始重新加载所需的javascript。
示例：
<body onload="page_defaults()" onunload="back_button_reload_fix()>

function back_button_reload_fix(){
    page_defaults();
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接