原文地址为： 关于js关闭窗口的事件和用法

Onunload与Onbeforeunload

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

Onbeforeunload也是在页面刷新或关闭时调用，Onbeforeunload是正要去服务器读取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。曾经做一个考试系统，涉及到防止用户半途退出考试（有意或者无意），代码如下：

Code
<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事件，在页面前进、后退、刷新、转向、关闭后都会触发。因此要捕获强制关闭窗口的特殊事件，需要在代码上加上判断条件，以保证在符合情形的条件下触发。该段代码已经成功地进行测试。

对话框取值

　　在网页中，经常会使用一种类似对话框的设计，为了方便用户输入、快速选择经常会打开一个页面，再做出选择后关闭该页面并将用户选择的数据传递到父页面做后续处理。

　　 前些时间，看到一种比较原始的方法，不是很通用，直接在子页面里修改父页面某个控件的数值再加之关闭。这样做的缺点是，不适合大规模的调用。假设父页面有开始日期与结束日期两个框需要接受日历页面的输入，那么你需要做两个不同的日历页面才能保证两个框都有对应的数据。这在大型工程中是不好的设计方法。多样化的外部环境，如果不考虑通用的方法，将增加维护的难度同时降低开发的效率。

　　IE支持模态窗口，在对话框的页面中通过设置的window.returnValue的数值，在父窗体中靠调用window.showModalDialog获取返回值，无效将返回null（打开的页面不存在）或undefined（window.returnValue没有设置）。我设计了getDialog函数，用于获取子窗体的返回值，异常或者无效将返回空串否则为正常返回数据。
而原先的window.open方式，我也改进一下设计了getWindowReturnValue，通过侦听子窗体的window.returnValue，如果有数据将开始终止。如果窗体仍然打开则自动关闭。同样两个函数都需要进行正确的设置window.returnValue。

//在IE中打开模态对话框并返回数据
//需要在打开页面设置window.returnValue，错误或无效返回空
function getDialog(url)
{
var returnValue;
try
{
returnValue=window.showModalDialog(url);
}catch(e)
{ return ""; }
return (returnValue==null||returnValue=="undefined")?"":returnValue;
}
//使用window.open来获取子窗口数据,需要动态设置window.returnValue
//参数为：地址、名称、宽度、高度，不设置宽度与高度请设为0。
function getWindowReturnValue(url,name,width,height)
{
var opener=null;
var spec="toolbar=0,menubar=0,scrollbars=0,resizeable=0";
var returnValue=null;
if(width>0) spec=spec+",width="+String.valueOf(width);
if(height>0)
{
spec=spec+",height="+String.valueOf(height);
}
opener=window.open(url,name,spec);

while(!opener.window.closed)
{
returnValue=opener.window.returnValue;
if(returnValue!=null&&returnValue.length>0) break;
}
if(!opener.window.closed) opener.window.close();
return returnValue;
}

转载请注明本文地址： 关于js关闭窗口的事件和用法

关于js关闭窗口的事件和用法相关推荐

  1. 关闭弹框事件_关于js关闭窗口的事件和用法

    JS本身最高事件等级到window级,你可以对window进行onunload等监听来判断是否关掉当前浏览器窗口. 对于以前的单一窗口管理模式,关闭浏览器窗口即关闭应用程序窗口,是可以做到的. 但是现 ...

  2. js 自动关闭html页面,JS关闭窗口或JS关闭页面的几种代码分享

    第一种:JS定时自动关闭窗口 第二种:点击链接没有提示的JS关闭窗口 关闭窗口 第三种:窗口没有提示自动关闭的js代码 第三种:php代码提交窗口之后提示信息并自动关闭窗口的js代码 document ...

  3. Chrome浏览器 js 关闭窗口失效解决方法

    Chrome浏览器 js 关闭窗口失效解决方法 参考文章: (1)Chrome浏览器 js 关闭窗口失效解决方法 (2)https://www.cnblogs.com/WhiteM/p/7098787 ...

  4. js 自动关闭html页面,JS关闭窗口与JS关闭页面的几种方法小结

    第一种:JS定时自动关闭窗口 第二种:点击链接没有提示的JS关闭窗口关闭窗口 第三种:窗口没有提示自动关闭的js代码 IE6-7 JS关闭窗口不提示的方法 方法一:js 代码 function Clo ...

  5. html自动关闭当前页面,JS关闭窗口与JS关闭页面的几种方法小结

    第一种:JS定时自动关闭窗口 第二种:点击链接没有提示的JS关闭窗口关闭窗口 第三种:窗口没有提示自动关闭的js代码 IE6-7 JS关闭窗口不提示的方法 方法一:js 代码 function Clo ...

  6. 手机页面html5 关闭窗口,JS关闭窗口或JS关闭页面的几种代码分享

    这篇文章介绍了JS关闭窗口或JS关闭页面的几种代码,有需要的朋友可以参考一下 第一种:JS定时自动关闭窗口 代码如下: 第二种:点击链接没有提示的JS关闭窗口 代码如下: 关闭窗口 第三种:窗口没有提 ...

  7. JS关闭窗口时触发事件方法

    JS监听关闭浏览器事件 1.Onunload与Onbeforeunload区别: ①Onunload,onbeforeunload都是在刷新或关闭时调用,可以在 ②Onbeforeunload也是在页 ...

  8. js关闭窗口无提示,不支持FF

    在不是js打开的页面上按window.close(), 会有提示框,很烦,现在可以不用了,没有提示框直接关闭窗口. 试试下面代码: <object id="WebBrowser&quo ...

  9. JS关闭窗口兼容Firefox、Chrome、IE（二次总结后）

    要想使Chrome,IE,Firefox点击一个按钮调用js方法都自动关闭窗口,应该写成如下的. function windowclose() {     var browserName = navi ...

最新文章

  1. C++阶段01笔记02【数据类型（整型、sizeof关键字、实型（浮点型）、字符型、转义字符、字符串型、布尔类型 bool、数据的输入）】
  2. linux mkfifo管道
  3. hihocoder第226周：打表找规律
  4. 《css世界》中深藏不露的width:auto；总结
  5. 802.1x协议身份认证
  6. Fedora14源代码获取方法----直接到官网去下载
  7. 从qire123上抓取bdhd下载地址的firefox extension
  8. 核磁共振波谱仪基础知识及常见问题
  9. 猎魂觉醒服务器界面不显示角色,猎魂觉醒新人常见问题集合 新人常见问题解决_3DM手游...
  10. 2015年3月苹果新的审核标准（中文）
  11. 微信小程序调用地图和跟据经纬度打开手机地图导航
  12. 调用的目标发生异常 targetinvocationexception
  13. 【SwiftUI模块】0007、SwiftUI新手指引-新手指示-聚光灯介绍说明
  14. linux命令行恢复回收站,Trash-Cli：Linux 上的命令行回收站工具
  15. 数据处理：1 用pandas处理大型csv文件 2 使用Pandas分块处理大文件 3 分块读取
  16. rocketmq中broker的端口
  17. 住宅风水决议个人八大运 常鹤鸣
  18. Lg手机在linux刷机,LG G3卡刷刷机详细图文教程
  19. 2021年高考绵阳中学成绩查询,绵阳中学排名前十名,2021年绵阳中学排名一览表
  20. 怎样知道android的手机号码,查自己手机号码怎么查 教你五种方法【图文教程】...

热门文章

  1. 1079: 统计方形
  2. html5视频教程华清,华清创客学院—HTML5是否能代替Flash
  3. K8S系列：no kind “Deployment“ is registered for version apps/v1
  4. 在场景中增加固定自定义栏
  5. Linux常用操作和命令
  6. 有一定基础的 C++ 学习者该如何学习 Windows 编程？
  7. Mathematica中将多个动态图合并在一起（包括自动与手动）
  8. calamari图片记录
  9. 加百利号角/托里拆利小号
  10. 浏览器渲染页面的原理、回流、重绘