javascript在当前窗口关闭前检测窗口是否关闭


Posted in Javascript onSeptember 29, 2014

在当前窗口关闭前,检测当前窗口是否关闭

<pre name="code" class="html"><pre name="code" class="html"><HTML><HEAD> 
<script Language="JavaScript"> 
window.onbeforeunload=function(event){ 
alert("222"); //这里IE9会执行,CHROME不会执行 
// if(event.clientX>document.body.clientWidth && event.clientY<0||event.altKey){ //如果是刷新,则不提示 
RETURN "确定关闭窗口?"; 
// } 
} 
var aa ; 
var intervalVar; 
function showClose(){ 
console.log(" wait and val is :"+aa.closed); 
clearInterval(intervalVar); 
} 
function loadform(){ 
aa=window.open('foo.html', 'windowName',"width=200,height=200,scrollbars=no"); 
console.log("check close before op and val is :"+aa.closed); //现在窗口未关闭,结果为false 
aa.close();<span style="white-space:pre"> </span> //调用窗口关闭的方法 
console.log("not in wait and val is :"+aa.closed); //此时aa.close正在调用过程中,结果为false 
intervalVar = setInterval(showClose,100); }; //用循环检测子窗口是否关闭,其实用setTimeout也是可以的,不过值要设得大一些 
function unloadform(){ alert("2!"); } 
</script> 
</HEAD><BODY OnLoad="loadform()" OnUnload="unloadform()"> 
</BODY></HTML>

在ie9中,如果刷新文档的话,unloadform和onbeforeunload都会执行,如果是关闭页面的话只会执行onbeforeunload事件

值得注意的是,onunload在关闭页面时不会运行,估计此函数为浏览器内置事件,不能重新定义

在chrome中,如果刷新文档的话,unloadform和onbeforeunload都会执行,关闭页面的话,只会执行onbeforeunload,值得注意的是有注释的那一行一直不会执行.

如果是window.open打开的子窗口的话,可以通过window.closed属性检测是否关闭

<HTML><HEAD> 
<script Language="JavaScript"> 
var aa ; 
var intervalVar; 
function showClose(){ 
console.log(" wait and val is :"+aa.closed); 
clearInterval(intervalVar); 
} 
function loadform(){ 
aa=window.open('foo.html', 'windowName',"width=200,height=200,scrollbars=no"); 
console.log("check close before op and val is :"+aa.closed); //现在窗口未关闭,结果为false 
aa.close(); //调用窗口关闭的方法 
console.log("not in wait and val is :"+aa.closed); //此时aa.close正在调用过程中,结果为false 
intervalVar = setInterval(showClose,100); }; //用循环检测子窗口是否关闭,其实用setTimeout也是可以的,不过值要设得大一些 
function unloadform(){ alert("2!"); } 
</script> 
</HEAD><BODY OnLoad="loadform()" OnUnload="unloadform()"> <a href="test.htm">调用</a> 
</BODY></HTML>

父窗口关闭时会自动将window.open关闭的代码

<HTML><HEAD> 
<script Language="JavaScript"> 
var aa ; 
var intervalVar; 
window.onbeforeunload=function(event){ 
aa.close(); 
return "hello"; 
} 
function loadform(){ 
aa=window.open('test.htm', 'windowName',"width=200,height=200,scrollbars=no"); 
}; 
function unloadform(){ alert("2!"); } 
</script> 
</HEAD><BODY OnLoad="loadform()" OnUnload="unloadform()"> <a href="test.htm">调用</a> 
</BODY></HTML>
Javascript 相关文章推荐
jQuery实战之品牌展示列表效果
Apr 10 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 #Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 #Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 #Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 #Javascript
Javascript基础知识(二)事件
Sep 29 #Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 #Javascript
Javascript表单验证要注意的事项
Sep 29 #Javascript
You might like
php的dl函数用法实例
2014/11/06 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
python处理json数据中的中文
2014/03/06 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
python爬虫之自制英汉字典
2019/06/24 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
医学专业自荐信
2014/06/14 职场文书
九九重阳节标语
2014/10/07 职场文书
影视后期实训报告
2014/11/05 职场文书
交通事故协议书范本
2014/11/18 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
vue基于Teleport实现Modal组件
2021/05/31 Vue.js
vue选项卡切换的实现案例
2022/04/11 Vue.js