全面解析onunload,onbeforeunload,load事件

2013-04-18 金牌狙击手 1 评论

Onunload，onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。
Onbeforeunload也是在页面刷新或关闭时调用，Onbeforeunload是正要去服务器读取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。

1、onbeforeunload事件：

说明：目前三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持。
用法：
·object.onbeforeunload = handler
·<element … ></element>
描述：
事件触发的时候弹出一个有确定和取消的对话框，确定则离开页面，取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。
触发于：
·关闭浏览器窗口
·通过地址栏或收藏夹前往其他页面的时候
·点击返回，前进，刷新，主页其中一个的时候
·点击一个前往其他页面的url连接的时候
·调用以下任意一个事件的时候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit.
·当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候。
·重新赋予location.href的值的时候。
·通过input type=”submit”按钮提交一个具有指定action的表单的时候。
可以用在以下元素：
·BODY, FRAMESET, window
平台支持：
IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+
示例：

<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>onbeforeunload测试</title>
<script>
function checkLeave(){
    　　　　event.returnValue="确定离开当前页面吗？";
}
</script>
</head>
<body >
</body>
</html>

2、onunload事件

用法：
·object.onbeforeunload = handler
·<element ></element>
触发于：
·关闭浏览器窗口
·通过地址栏或收藏夹前往其他页面的时候
·点击返回，前进，刷新，主页其中一个的时候
·点击一个前往其他页面的url连接的时候
·调用以下任意一个事件的时候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit.
·当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候。
·重新赋予location.href的值的时候。
·通过input type=”submit”按钮提交一个具有指定action的表单的时候。
示例：

<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>onunload测试</title>
<script>
function checkLeave(){
    　　　　alert("欢迎下次再来！");
}
</script>
</head>
<body >
</body>
</html>

<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>onunload测试</title>
<script>
function checkLeave(){
    　　　　alert("欢迎下次再来！");
}
</script>
</head>
<body >
</body>
</html>

本文出自 51CTO.COM技术博客

2.onunload,onbeforeunload,onload 三者执行顺序:

关闭页面时:onbeforeunload->onunload

刷新页面时:onbeforeunload->onunload->onload

载入页面时:onload

3.onbeforeunload能弹出对话框确定是否关闭页面,面onunload能弹出对话框,但不能阻止页面的关闭.

onbeforeunload弹出确定对话框:onbeforeunload=”return ‘你确定要关闭'” 或者 onbeforeunload=”event.returnValue=’你确定要关闭'” 当return 后面没值的时候(不是为空),不弹出对话框,return后面的字符会加在浏览器弹出的一个对话框中,所以没必要用confirm,否则会造成弹出两个对话框

3.判断是刷新还是关闭

一个判断页面是否真的关闭和刷新的好方法：

金牌狙击手

52html5是一个web前端|html5资源平台，为广大html5开发者及爱好者提供html5相关的教程、资讯、html5游戏、html5教程等，并涉及css3、javascript前端知识。