前端 如何在页面刷新或关闭前执行函数 2016年1月6日
学习
0 条评论

如何实现？

一、代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>
</head>
<body>
<h1 class="xianshi">显示区域</h1>
<script>
    window.onbeforeunload = function(){
        alert("成功");
        $(".xianshi").html("success");
        return '确定要刷新页面吗？';
        alert("失败");
        $(".xianshi").html("fail");
    }
</script>
</body>
</html>

刷新实质上就是关闭当前页面再重新加载，所以本质上关闭函数同时作用于刷新和关闭页面两个动作。

关于不同浏览器的执行差异：

  1. ie：可以执行alert事件，可以执行改变页面的函数，有确认关闭的弹窗。
  2. chrome：不能执行alert事件，可以执行改变页面的函数，有确认关闭的弹窗。
  3. firefox：这段代码无法执行，因为关闭页面时函数。与以上两者不同，不是window.onbeforeunload

顺带一提：return后无法执行任何指令。

二、总结

记录一下。

Post Views: 81