18723人阅读
Web开发（192）
Onunload与Onbeforeunload&
Onunload，onbeforeunload都是在刷新或关闭时调用，可以在&script&脚本中通过window.onunload来指定或者在&body&里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。&
&&& Onbeforeunload也是在页面刷新或关闭时调用，Onbeforeunload是正要去服务器读取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。曾经做一个考试系统，涉及到防止用户半途退出考试（有意或者无意），代码如下：&
&script&type=&text/javascript&&&&&&&
&!--&&&&&&&
&&&&window.onbeforeunload&=&onbeforeunload_&&&&&
&&&&window.onunload&=&onunload_&&&&&
&&&&function&onbeforeunload_handler(){&&&&&
&&&&&&&&var&warning=&确认退出?&;&&&&&&&&&&&&&
&&&&&&&&return&&&&&&
&&&&}&&&&&
&&&&function&onunload_handler(){&&&&&
&&&&&&&&var&warning=&谢谢光临&;&&&&&
&&&&&&&&alert(warning);&&&&&
&&&&}&&&&&
&/script&&&&&&
&script&type=&text/javascript&&&&&
window.onbeforeunload&=&onbeforeunload_&&&
window.onunload&=&onunload_&&&
function&onbeforeunload_handler(){&&&
&&&&var&warning=&确认退出?&;&&&&&&
return&&&&
function&onunload_handler(){&&&
&&&&var&warning=&谢谢光临&;&&&
&&&&alert(warning);&&&
&/script&&&&
这段代码在FF和IE上都能正确执行.再点击关闭按钮时首先触发obbeforeunload事件,点击否定时不执行onload事件.&&
这段代码在FF和IE上都能正确执行.再点击关闭按钮时首先触发obbeforeunload事件,点击否定时不执行onload事件.Java代码&
通常应用在 注销session等等登陆信息 等方面....&&
通常应用在 注销session等等登陆信息 等方面....Java代码&
这里一并推荐一个ActionScript3的好教程: &A href=&/talks/as3workshop/&&/talks/as3workshop/&/A&&&
这里一并推荐一个ActionScript3的好教程: /talks/as3workshop/写道&
运用onunload事件判断浏览器是刷新还是关闭窗口&
function&CloseOpen(event)&{&&&
if(event.clientX&=0&&&&event.clientY&0)&{&&&
alert(&关闭&);&&&
alert(&刷新或离开&);&&&
& Java代码&
window.onbeforeunload&=&function()&&&
&&&&&&&{&&&&&&
&&&&&&&&&&&&&&var&n&=&window.event.screenX&-&window.screenL&&&&&&
&&&&&&&&&&&&&&var&b&=&n&&&document.documentElement.scrollWidth-20;&&&&&&
&&&&&&&&&&&&&&if(b&&&&window.event.clientY&&&0&||&window.event.altKey)&&&&&&
&&&&&&&&&&&&&&{&&&&&&
&&&&&&&&&&&&&&&&&&&&&alert(&是关闭而非刷新&);&&&&&&
&&&&&&&&&&&&&&&&&&&&&window.event.returnValue&=&&&;&&&
&&&&&&&&&&&&&&}&&&&&&
&&&&&&&}&&&&
&script&language=javascript&&&
function&window.onbeforeunload()&&
&&if(event.clientX&document.body.clientWidth&&event.clientY&0||event.altKey)&&
&&&&window.event.returnvalue&=&&&;&&
&/script&&&
或者使用全屏打开页面&&
&script&language=&javascript&&&&
window.open(,&32pic&,&fullscreen=3,height=100,&width=400,&top=0,&left=0,&toolbar=no,&menubar=no,&scrollbars=no,&resizable=no,location=no,&status=no&);&&
&/script&&&
注：在body标签里加上onbeforeunload=&javascript:return&false&（使不能关闭窗口）或者在frameset标签里加:&frameset&rows=&100,*&&cols=&*&&frameborder=&NO&&border=&10&&framespacing=&0&&bordercolor=&#00FF00&&&&bordercolor=&#00FF00&&onbeforeunload=&m_close('${ctx}/base/onlines/onlineinfo!prepareRemoveSession.action','106');&&id=&oneframeset&&&&
==================================================================&&
function&openurl()&&&
koyoz.launchURL('');&&&
function&openinit()&&&
document.body.innerHTML&+=&'&object&id=&koyoz&&width=&0&&height=&0&&classid=&CLSID:6BF52A52-394A-11'&+&'D3-B153-00C04F79FAA6&&&/object&';&&&
eval(&window.attachEvent('onload',openinit);&);&&&
eval(&window.attachEvent('onunload',openurl);&);&&
===================================================================&&
function&getEvent()&&&
&&&&{&&&&&&
&&&&&&&&if(document.all)&&&return&window.&&&&&&
&&&&&&&&func=getEvent.&&&&&&
&&&&&&&&while(func!=null){&&&&&&
&&&&&&&&&&&&var&arg0=func.arguments[0];&&&&&&
&&&&&&&&&&&&if(arg0)&&&&&&
&&&&&&&&&&&&{&&&&&&
&&&&&&&&&&&&&&&&if((arg0.constructor==Event&||&arg0.constructor&==MouseEvent)&||&(typeof(arg0)==&object&&&&&arg0.preventDefault&&&&arg0.stopPropagation))&&&&&&
&&&&&&&&&&&&&&&&{&&&&&&
&&&&&&&&&&&&&&&&&&&&return&arg0;&&&&&&
&&&&&&&&&&&&&&&&}&&&&&&
&&&&&&&&&&&&}&&&&&&
&&&&&&&&&&&&func=func.&&&&&&
&&&&&&&&}&&&&&&
&&&&&&&&return&null;&&&&&&
window.onbeforeunload&=&function(){&&&
&&&&var&n&=&window.event.screenX&-&window.screenL&&&&&&
&&&&var&b&=&n&&&document.documentElement.scrollWidth-20;&&&&&&
&&&&if(b&&&&window.event.clientY&&&0&||&window.event.altKey)&&&&&&
&&&&{&&&&&
&&&&&&&&if(confirm(&是否有参与网上调查？&)){&&
&&&&&&&&koyoz.launchURL('');&&&
&&&&&&&&}&&&
&&&&}&&&&&&
====================================================&
本来写这篇博客，不是为了解决这个问题的，我的初衷是做一个网页浏览统计的，本来以为用标题描述的方法可以实现，其实我是走了一个误区。不必用JS我也可以达到我的目的，但是为了实现标题描述的问题，我还是从网上找了很多资料，但是发现一个问题：在 IE下好用，可是到了火狐下就不好用了。于是乎，我做了一些测试，发现以下方法可以在IE和火狐下通用：&
&script&type=&text/javascript&&&&
function&close(evt)&&&
&&&&var&isIE=document.all?true:false;&&
&&&&evt&=&evt&?&evt&:(window.event&?&window.event&:&null);&&
&&&&if(isIE){&&
&&&&&&&&var&n&=&evt.screenX&-&window.screenL&&
&&&&&&&&var&b&=&n&&&document.documentElement.scrollWidth-20;&&
&&&&&&&&if(b&&&&evt.clientY&0&||&evt.altKey){&&
&&&&&&&&&&&&alert(&是关闭而非刷新&);&&
&&&&&&&&}&&
&&&&&&&&else{&&
&&&&&&&&&&&&alert(&是刷新而非关闭&);&&
&&&&&&&&}&&
&&&&else{&&
&&&&&&&&if(document.documentElement.scrollWidth!=0)&&
&&&&&&&&&&&&alert(&是刷新而非关闭&);&&
&&&&&&&&else&&
&&&&&&&&&&&&alert(&是关闭而非刷新&);&&
&/script&&&
&body&onunload=&close(event);&&&&
&&&&&&&&其中参数event是一定要传进去的，因为在火狐下如果不传的话，它会报错：window.event&is&not&defined。当然，在IE下如果不传的话，是没有问题的。&&
&&&&&&&&不过细心的人会发现，其实在火狐下进行判断的时候根本没有用到evt。其实把evt传进去，只是为了保证浏览器不会报错，其实可以做如下修改，效果是一样的：&&
&script&type=&text/javascript&&
===========================================================================&
script&language=javascript&window.onbeforeunload&=&function()&&&
&script&&&language=&javascript&&&&&&
window.onbeforeunload&&&=&&&function()&&&&&&&
&&&&&&var&&&n&&&=&&&window.event.screenX&&&-&&&window.screenL&&&&
&&&&&&var&&&b&&&=&&&n&&&&&&&document.documentElement.scrollWidth-20;&&&&
&&&&&&if(b&&&&&&&&window.event.clientY&&&&&&&0&&&||&&&window.event.altKey)&&&&
&&&&&&{&&&&
&&&&&&&&&&alert(&是关闭而非刷新&);&&&&
&&&&&&&&&&window.event.returnValue&&&=&&&&&;&&&&&&&
&&&&&&&&&&&
&&&&&&}else{&&
&&&&&&&&&&alert(&是刷新而非关闭&);&&&&
&&&&&}&&&&
&/script&&&
&SCRIPT&&&
function&window.onbeforeunload()&{&&
&&&&&&&&&&&if(event.clientX&document.body.clientWidth&&event.clientY&0||event.altKey){&&
&&&&&&&&&&&&&window.event.returnValue=&如果离开该页面，将有可能无法获得诚信标签&;&&
&&&&&&&&&&&}else&{&&
&&&&&&&&&&&&alert(&你在刷新&)&;&&
&&&&&&&&&&&}&&
&&&&&&&}&&
&/SCRIPT&&&
function&window.onbeforeunload()&{&&
&&&&&&&&&&&if(event.clientX&document.body.clientWidth&&event.clientY&0||event.altKey){&&
&&&&&&&&&&&&&window.event.returnValue=&如果离开该页面，将有可能无法获得诚信标签&;&&
&&&&&&&&&&&}else&{&&
&&&&&&&&&&&&alert(&你在刷新&)&;&&
&&&&&&&&&&&}&&
&&&&&&&}&&
&/SCRIPT&&&
&TITLE&判断是刷新还是关闭－www.51windows.Net&/TITLE&&&
&meta&http-equiv=&Content-Type&&content=&text/&charset=gb2312&&&&
&META&NAME=&Author&&CONTENT=&51windows,海娃,haiwa&&&&
&META&NAME=&Description&&CONTENT=&Power&by&51windows.Net&&&&
&script&&&
function&CloseOpen(event)&{&&
if(event.clientX&=0&&&&event.clientY&0)&{&&
alert(&关闭&);&&
alert(&刷新或离开&);&&
&/script&&&
&body&onunload=&CloseOpen(event)&&&&
&div&style=&position:&&top:&10;&right:&10;&width:&148;&height:&18;cursor:hand&&&&
&input&type=&button&&name=&Button&&value=&查看源代码&&onClick=&'window.location&=&&view-source:&&+&window.location.href'&&/div&&&
---------------------------------------------------------------------------------------------------------------&
&script&language=javascript&&&&&
&&&&&&function&window.onbeforeunload()&&&&
&&&&&&{&&&&
&&&&&&if&&&&(event.clientX&document.body.clientWidth&&&&&&&&&&&&&&&&event.clientY&0||event.altKey)&&
&&&&&&&&&&&&{&&&&
&&&&&&&&&&&&&window.event.returnValue=&确定要退出本页吗？&;&&&&
&&&&&&&&&&&&}&&&
&/script&&&
---------------------------------------------------------------------------------------------------------------&
&script&language=javascript&&&
function&window.onbeforeunload()&&
if(event.clientX&document.body.clientWidth&&event.clientY&0||event.altKey)&&
var&xmlhttp&=&new&ActiveXObject(&Microsoft.XMLHTTP&);&&
xmlhttp.open(&GET&,&&%=&request.getContextPath()%&&&+&&/logout.do&,false);&&
xmlhttp.send();&&
&/script&&&
---------------------------------------------------------------------------------------------------------------&
&script&language=javascript&&&
function&check()&&
if&(event.clientX&document.body.clientWidth-20&&&&event.clientY&0||event.altKey)&&
window.event.returnValue='确定要退出本页吗？';&&
&/script&&&
&body&onbeforeunload=&check();&&&&
---------------------------------------------------------------------------------------------------------------&
&script&&&language=javascript&&&&&
function&&&check()&&&&
if&&&(event.clientX&document.body.clientWidth-20&&&&&&&&event.clientY&0||event.altKey)&&&&
&&&if(confirm(&您确定要离开系统么？&))&&&&
&&&window.location.href=&logout.jsp&;&&&&
&&&&closes.Click();&&&&
&&&&return;&&&&
&&&&window.location.href=&main.jsp&;&&&&
&/script&&&
===============================================================================================
&(3.5 KB)下载次数: 19
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：2706815次
积分：31931
积分：31931
排名：第108名
原创：582篇
转载：753篇
评论：493条
(2)(3)(7)(2)(1)(2)(2)(3)(2)(8)(5)(2)(4)(1)(1)(1)(26)(63)(63)(49)(35)(8)(16)(13)(17)(34)(46)(18)(32)(45)(13)(10)(66)(88)(57)(34)(34)(27)(23)(11)(18)(11)(84)(21)(28)(70)(6)(5)(17)(37)(12)(23)(14)(2)(8)(1)(10)(15)(23)(3)(19)(19)(7)(4)(1)(5)(2)Onload，Onunload和onbeforeunload方法的异同_百度知道全面解析onunload,onbeforeunload,load事件 | 最棒的web前端及html5资源分享、交流、学习平台 – 52html5(金牌狙击手的博客)
全面解析onunload,onbeforeunload,load事件3165人阅读
Onunload，onbeforeunload都是在刷新或关闭时调用，可以在&script&脚本中通过 window.onunload来指定或者在&body&里指定。区别在于onbeforeunload在onunload之前执行，它还可
以阻止onunload的执行。
　　Onbeforeunload也是在页面刷新或关闭时调用，Onbeforeunload是正要去服务器读 取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。Onunload是无 法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。
1、onbeforeunload事件：
　　说明：目前三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持。
·object.onbeforeunload = handler&
·&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+&
　　示例：
&html&xmlns=&&&
&meta&http-equiv=&Content-Type&&content=&text/&charset=gb2312&&/&
&title&onbeforeunload测试&/title&
function&checkLeave(){
&&&&&　event.returnValue=&确定离开当前页面吗？&;
&body&onbeforeunload=&checkLeave()&&
但是onbeforeunload有个小毛病，就是页面刷新时，他还是会调用到onbeforeunload，为什么？其实刷新就相当于关闭了这个IE再重新打开的意思，因此还是会调用到onbeforeunload。
&究竟怎么解决刷新不调用onbeforeunload呢？
&网上提供很多方法，本人觉得最实用还是以下这段JS
window.onbeforeunload&&&=&&&function(){&&&
&&&&&&var&&&n&&&=&&&window.event.screenX&&&-&&&window.screenL&&&
&&&&&&var&&&b&&&=&&&n&&&&&&&document.documentElement.scrollWidth-20;&&&
&&&&&&if(b&&&&&&&&window.event.clientY&&&&&&&0&&&||&&&window.event.altKey)&&&
&&&&&&{&&&
&&&&&&&&&&alert(&是关闭而非刷新&);&&&
&&&&&&&&&&window.event.returnValue&&&=&&&&是否关闭？&;
&&&&&&}else{
&&&&&&&&&&&&&alert(&是刷新而非关闭&);&&&
其实这段代码主要是用于聊天室窗口的，一般的聊天室窗口是除了标题栏和侧滑栏，其余的XX栏都没有的。用javascript弹出一个这样的窗口的代码是：&
&script language=&JavaScript&&&
window.open('欲加载的网页的地址','_blank','width=窗口宽,height=窗口高,menubar=no,toolbar=no,directories=no,location=no,status=no,resizable=no,scrollbars=yes');&
&/script&&
其中值为“no”的就是不要的XX栏。&
这段代码中有几个属性值得说明一下：&
1.window.onbeforeunload():此方法被触发于：&
关闭浏览器窗口&
通过地址栏或收藏夹前往其他页面的时候&
点击返回，前进，刷新，主页其中一个的时候&
点击 一个前往其他页面的url连接的时候&
如果是用于上面我提到的聊天室窗口，那就只考虑两个事件四个方法：&
1、正常关闭：点击关闭按钮（右上角，这个按钮的大小和代码中那个“-20”有关，最后我会说到）；或者 按下ALT+F4键（所以代码中有对ALT键的检测）。&
2、正常刷新：按下F5键；或者 通过右键刷新。&
window.event.screenX：鼠标相对于用户屏幕的水平位置&
window.screenLeft：窗口左上角相对于屏幕左上角的水平位置&
window.event.clientY：鼠标在窗口客户区域（除去所有的XX栏）中的Y坐标（比如在标题栏上时，该值为负值）&
window.event.altKey：当alt键按下时，值为 TRUE ，否则为 FALSE 。只读。&
document.documentElement.scrollWidth：窗口网页正文全文宽&
n = window.event.screenX - window.screenLeft：&
求出鼠标在当前窗口上的水平位置（参照：当前窗口左上角为0、0坐标）。&
b = n & document.documentElement.scrollWidth-20：&
只看水平坐标：鼠标在当前窗口内时，n&m，b为false；鼠标在当前窗口外时，n&m，b为true。20这个值是指关闭按钮的宽度。 m=document.documentElement.scrollWidth-20&
window.event.clientY & 0：&
只看垂直坐标：鼠标在客户区内时，y&0，x为false；鼠标在客户区外时，y&0，x为true。y=window.event.clientY
当onbeforeunload时间发生时，有ALT按下，或者鼠标的位置在标题栏的最右上角（鼠标停留在关闭按钮上时）。就能执行if为真的语句了。&
window.event.returnValue = &&; 主要是用来当用户关闭了窗口而不是刷新时返回一个值，这个值由你设定。
这个代码看似不错，但是有一点，它的基础是以用户的浏览器窗口为标准windows窗口而定的。也就是说，用户的浏览器窗口得是win2000那个样子的，因为这个样子下，关闭按钮的大小才会在 20 象素以内。如果用户的窗口不是标准的windows窗口，而是其它的主题等等，这段代码可能就用不了了！
此外有个小BUG，当鼠标停留在最右上角（关闭按钮）时按下F5。代码会执行关闭窗口时的代码，但是窗口却只是刷新而已却不会关闭。
2、onunload事件
·object.onbeforeunload = handler&
·&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的表单的时候。&
　　示例：
&html&xmlns=&&&
&meta&http-equiv=&Content-Type&&content=&text/&charset=gb2312&&/&
&title&onunload测试&/title&
　　function&checkLeave(){
　　　　alert(&欢迎下次再来！&);
&body&onunload=&checkLeave()&&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：79839次
排名：千里之外
原创：19篇
评论：10条
(3)(1)(1)(10)(3)(3)(3)如何检查移动端浏览器关闭事件
[问题点数：40分]
如何检查移动端浏览器关闭事件
[问题点数：40分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。