Javascript判断页面刷新或关闭的方法(转)

onbeforeunload与onunload事件


Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。

Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。

页面加载时只执行onload    
页面关闭时先执行onbeforeunload,最后onunload
页面刷新时先执行onbeforeunload,然后onunload,最后onload。

1、onbeforeunload事件:
说明:目前三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持。
用法:

1 ·object.onbeforeunload = handler
2 ·<element onbeforeunload = “handler” … ></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+
示例:

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 4 <title>onbeforeunload测试</title>
 5 <script>
 6 function checkLeave(){
 7 event.returnValue="确定离开当前页面吗?";
 8 }
 9 </script>
10 </head>
11 <body onbeforeunload="checkLeave()">
12 </body>
13 </html>

 

 

 

2、onunload事件
用法:

1 ·object.onbeforeunload = handler
2 ·<element onbeforeunload = "handler"></element>

 

描述:
当用户关闭一个页面时触发 onunload 事件。

触发于:
·关闭浏览器窗口
·通过地址栏或收藏夹前往其他页面的时候
·点击返回,前进,刷新,主页其中一个的时候
·点击 一个前往其他页面的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的表单的时候。
示例:

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 4 <title>onunload测试</title>
 5 <script>
 6 function checkLeave(){
 7 alert("欢迎下次再来!");
 8 }
 9 </script>
10 </head>
11 <body onunload="checkLeave()">
12 </body>
13 </html>

 

 

 

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

1 window.onbeforeunload=function (){
2 alert("===onbeforeunload===");
3 if(event.clientX>document.body.clientWidth && event.clientY < 0 || event.altKey){
4 alert("你关闭了浏览器");
5 }else{
6 alert("你正在刷新页面");
7 }
8 }

 

这段代码就是判断触发onbeforeunload事件时,鼠标是否点击了关闭按钮,或者按了ALT+F4来关闭网页,如果是,则认为系统是关闭网页,否则在认为系统是刷新网页。

时间: 2024-10-03 04:56:36

Javascript判断页面刷新或关闭的方法(转)的相关文章

用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)_javascript技巧

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

javascript实现页面刷新时自动清空表单并选中的方法_javascript技巧

本文实例讲述了javascript实现页面刷新时自动清空表单并选中的方法.分享给大家供大家参考.具体实现方法如下: <script language="javascript"> window.onload=function() { document.forms[0].reset(); placeFocus(); } function placeFocus() { document.forms[0].elements[0].focus(); // assuming the f

js禁止页面刷新与后退的方法

  本文实例讲述了js禁止页面刷新与后退的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

JavaScript判断变量是否为数组的方法(Array)_javascript技巧

 今天小编给大家整理些关于javascript判断变量是否是数组(Array)的相关知识,主要通过以下四点给大家展开话题,具体内容如下所示: 1. typeof真的那么厉害吗?? //首先看代码 var ary = [1,23,4]; console.log(typeof ary); //输出结果是Object 上面的办法并不能实时的检测出是否是数组,只能判断其类型,所以说typeof判断基本类型数据还是挺好的,但是不能准确测试出是否是数组(typeof的具体用法以后提及,现在回归正题) 2.i

js禁止页面刷新与后退的方法_javascript技巧

本文实例讲述了js禁止页面刷新与后退的方法.分享给大家供大家参考.具体实现方法如下: <script language="javascript"> //禁止用F5键 function document.onkeydown() { if ( event.keyCode==116) { event.keyCode = 0; event.cancelBubble = true; return false; } } //禁止右键弹出菜单 function document.onco

JS判断页面是否出现滚动条的方法_javascript技巧

本文实例讲述了JS判断页面是否出现滚动条的方法.分享给大家供大家参考.具体如下: var isScroll = function (el) { // test targets var elems = el ? [el] : [document.documentElement, document.body]; var scrollX = false, scrollY = false; for (var i = 0; i < elems.length; i++) { var o = elems[i]

js判断子窗体是否关闭的方法_javascript技巧

本文实例讲述了js判断子窗体是否关闭的方法.分享给大家供大家参考.具体如下: function InsideMessageAdd() { //window.open()得到子窗体 tip = OpenDialog('UploadFile.html?tp=nbtz', 'msg', 650, 180); //启动timer,判断子窗体是否关闭 timer = window.setInterval("IfWindowClosed()", 500); } var timer; var tip

Ajax提交表单页面刷新很快的解决方法

注:使用ajax 提交表单时 type类型最好不用submit 用button合适 <form> <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3"> <input type="button" class="btn btn-info" value="重置" onclick="return resetaa()">

javascript判断变量是否有值的方法

  以下介绍了javascript判断变量是否有值的方法,可实现有效判断值的功能,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了javascript判断变量是否有值的方法.分享给大家供大家参考.具体分析如下: 例如: ? 1 2 var a = null; var b = undefined; 以上这两种情况算作没有值 ? 1 2 3 4 5 6 7 8 9 if(a !== null && a !== undefined) { // } // 为什么不能单用if(a !== nu