关于js封闭窗口的事件和用法
日期：2014-05-16 浏览次数：20383 次
关于js关闭窗口的事件和用法
Onunload与Onbeforeunload
Onunload，onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。
Onbeforeunload也是在页面刷新或关闭时调用，Onbeforeunload是正要去服务器读取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。曾经做一个考试系统，涉及到防止用户半途退出考试（有意或者无意），代码如下：
<script type="text/javascript">
<!--
window.onbeforeunload = onbeforeunload_handler;
window.onunload = onunload_handler;
function onbeforeunload_handler(){
var warning="确认退出?";
return warning;
}
function onunload_handler(){
var warning="谢谢光临";
alert(warning);
}
// -->
</script>
同时在网上找到了一篇相关的文章来分享下:
B/S架构的应用系统，除了需要使用一些动态脚本语言进行数据库等一系列服务器资源的访问，还需要适当使用客户端脚本进行页面的界面动态显示、提交服务器前的预处理、根据用户的操作行为进行合理的事件处理等等。
你可能认为最流行的语言是Java、Basic、C、C++之类的高级语言，实质上Javascript也是当之无愧的流行语言。它的奥妙远比你想象中的还要多。如果你看过Google的GMail和Map，你要知道Javascript也可以让世界变得触手可及将技术变得炉火炖青的地步。
本文将从实际中经常遇到的几个问题入手，着手用Javascript脚本巧妙解决这些问题，以此抛砖引玉希望给大家带来帮助。
强制关闭窗口后清除用户Session
一般的会员式网站，在会员登陆成功后都会建立会话或者Cookie，然后可以直接在站点间共享会员的数据。而这些数据通常放置在服务器内存中。在会员退出时，按照正常的设计思路是执行退出功能释放会员登陆成功后所使用的服务器和客户端等相关资源。现在经常遇到的问题是，用户经常直接关闭网页而不是我们所期望执行的退出程序。这样就会造成用户登陆后的资源不会及时释放而加重服务器负荷，随着问题的进一步累积逐步的放大从而影响服务器的性能。
有幸的是在网络上找到针对IE浏览器捕获用户使用Alt+F4、标题栏按右键关闭、双击标题栏、直接按关闭按钮的事件的方法。当然对于一些直接关闭进程或者最小化的方式在任务栏进行关闭是不能正常捕获的，但现在所涉及的解决方案，可以解决大多数存在的问题。
<script language="javascript">
function window.onUnload()
{
var newWindow;
if((window.screenLeft>=10000 && window.screenTop>=10000)||event.altKey)
{
newWindow=window.open('退出程序地址','网页名称',
'width=0,height=0,top=4000,left=4000');//新窗口将在视区之外打开
newWindow.opener=null;
sleep(5000);//执行休眠操作以便能够处理完新打开窗口执行代码
newWindow.close();//新窗口关闭
……//其他需要执行的退出程序序列可参考上面进行添加
}
}
function sleep(milisecond)
{
var currentDate,beginDate=new Date();
var beginHour,beginMinute,beginSecond,beginMs;
var hourGaps,minuteGaps,secondGaps,msGaps,gaps;
beginHour=beginDate.getHours();
beginMinute=beginDate.getMinutes();
beginSecond=beginDate.getSeconds();
beginMs=beginDate.getMilliseconds();
do
{
currentDate=new Date();
hourGaps=currentDate.getHours() - beginHour;
minuteGaps=currentDate.getMinutes() - beginMinute;
secondGaps=currentDate.getSeconds() - beginSecond;
msGaps=currentDate.getMilliseconds() - beginMs;
if(hourGaps<0) hourGaps+=24; //考虑进时进分进秒的特殊情况
gaps=hourGaps*3600+ minuteGaps*60+ secondGaps;
gaps=gaps*1000+msGaps;
}while(gaps<milisecond);
}
</script>
说明：
window.screenLeft = 10000 + 边框宽 (2×2) = 10004
window.screenTop = 10000 + 工具栏高 + 标题栏高 = 10097
需要说明的，在onBeforeUnload中屏幕这些坐标属性都是正常数值。
screenLeft：获取浏览器客户区左上角相对于屏幕左上角的 x 坐标。
screenTop：获取浏览器客户区左上角相对于屏幕左上角的 y 坐标。
如果需使用window.location指定URL进行处理，那么需放在onBeforeUnload 事件中而不是onUnload事件。在onUnload里不要使用window.close，因为对象销毁前会立即触发该事件，无法有效执行由被销毁对象所引发的引用。而onBeforeUnload是页面将要被卸载前触发的事件。解决的方法是新开一个窗口再将之关闭。而所谓的清除实质上就是把做好退出功能的页面，直接以打开新窗口方式的调用。在调用到关闭的时候要尽可能停留一段时间确保全部代码被有效触发。需要说明的是onUnload事件，在页面前进、后退、刷新、转向、关闭后都会触发。因此要捕获强制关闭窗口的特殊事件，需要在代码上加上判断条件，以保证在符合情形的条件下触发。该段代码已经成功地进行测试。
Onunload与Onbeforeunload
Onunload，onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。
Onbeforeunload也是在页面刷新或关闭时调用，Onbeforeunload是正要去服务器读取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。曾经做一个考试系统，涉及到防止用户半途退出考试（有意或者无意），代码如下：
<script type="text/javascript">
<!--
window.onbeforeunload = onbeforeunload_handler;
window.onunload = onunload_handler;
function onbeforeunload_handler(){
var warning="确认退出?";
return warning;
}
function onunload_handler(){
var warning="谢谢光临";
alert(warning);
}
// -->
</script>
同时在网上找到了一篇相关的文章来分享下:
B/S架构的应用系统，除了需要使用一些动态脚本语言进行数据库等一系列服务器资源的访问，还需要适当使用客户端脚本进行页面的界面动态显示、提交服务器前的预处理、根据用户的操作行为进行合理的事件处理等等。
你可能认为最流行的语言是Java、Basic、C、C++之类的高级语言，实质上Javascript也是当之无愧的流行语言。它的奥妙远比你想象中的还要多。如果你看过Google的GMail和Map，你要知道Javascript也可以让世界变得触手可及将技术变得炉火炖青的地步。
本文将从实际中经常遇到的几个问题入手，着手用Javascript脚本巧妙解决这些问题，以此抛砖引玉希望给大家带来帮助。
强制关闭窗口后清除用户Session
一般的会员式网站，在会员登陆成功后都会建立会话或者Cookie，然后可以直接在站点间共享会员的数据。而这些数据通常放置在服务器内存中。在会员退出时，按照正常的设计思路是执行退出功能释放会员登陆成功后所使用的服务器和客户端等相关资源。现在经常遇到的问题是，用户经常直接关闭网页而不是我们所期望执行的退出程序。这样就会造成用户登陆后的资源不会及时释放而加重服务器负荷，随着问题的进一步累积逐步的放大从而影响服务器的性能。
有幸的是在网络上找到针对IE浏览器捕获用户使用Alt+F4、标题栏按右键关闭、双击标题栏、直接按关闭按钮的事件的方法。当然对于一些直接关闭进程或者最小化的方式在任务栏进行关闭是不能正常捕获的，但现在所涉及的解决方案，可以解决大多数存在的问题。
<script language="javascript">
function window.onUnload()
{
var newWindow;
if((window.screenLeft>=10000 && window.screenTop>=10000)||event.altKey)
{
newWindow=window.open('退出程序地址','网页名称',
'width=0,height=0,top=4000,left=4000');//新窗口将在视区之外打开
newWindow.opener=null;
sleep(5000);//执行休眠操作以便能够处理完新打开窗口执行代码
newWindow.close();//新窗口关闭
……//其他需要执行的退出程序序列可参考上面进行添加
}
}
function sleep(milisecond)
{
var currentDate,beginDate=new Date();
var beginHour,beginMinute,beginSecond,beginMs;
var hourGaps,minuteGaps,secondGaps,msGaps,gaps;
beginHour=beginDate.getHours();
beginMinute=beginDate.getMinutes();
beginSecond=beginDate.getSeconds();
beginMs=beginDate.getMilliseconds();
do
{
currentDate=new Date();
hourGaps=currentDate.getHours() - beginHour;
minuteGaps=currentDate.getMinutes() - beginMinute;
secondGaps=currentDate.getSeconds() - beginSecond;
msGaps=currentDate.getMilliseconds() - beginMs;
if(hourGaps<0) hourGaps+=24; //考虑进时进分进秒的特殊情况
gaps=hourGaps*3600+ minuteGaps*60+ secondGaps;
gaps=gaps*1000+msGaps;
}while(gaps<milisecond);
}
</script>
说明：
window.screenLeft = 10000 + 边框宽 (2×2) = 10004
window.screenTop = 10000 + 工具栏高 + 标题栏高 = 10097
需要说明的，在onBeforeUnload中屏幕这些坐标属性都是正常数值。
screenLeft：获取浏览器客户区左上角相对于屏幕左上角的 x 坐标。
screenTop：获取浏览器客户区左上角相对于屏幕左上角的 y 坐标。
如果需使用window.location指定URL进行处理，那么需放在onBeforeUnload 事件中而不是onUnload事件。在onUnload里不要使用window.close，因为对象销毁前会立即触发该事件，无法有效执行由被销毁对象所引发的引用。而onBeforeUnload是页面将要被卸载前触发的事件。解决的方法是新开一个窗口再将之关闭。而所谓的清除实质上就是把做好退出功能的页面，直接以打开新窗口方式的调用。在调用到关闭的时候要尽可能停留一段时间确保全部代码被有效触发。需要说明的是onUnload事件，在页面前进、后退、刷新、转向、关闭后都会触发。因此要捕获强制关闭窗口的特殊事件，需要在代码上加上判断条件，以保证在符合情形的条件下触发。该段代码已经成功地进行测试。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
