这里是文章模块栏目内容页
beforeunload事件实现弹出框提示是否关闭页面

在网站表单填写的页面,需要增加这样一种效果,用户填写表单内容处于未完成状态时,由于误操作或者以为已经填写完整了表单内容,关闭了浏览器当前页面的标签,我们希望在用户点击关闭浏览器标签时,弹出一个提示框和用户进行确认,防止误操作的几率。

这里提供了jquery和JavaScript原生两种实现办法,都是通过监听浏览器的 beforeunload事件实现;

JQUERY写法:
$(window).bind('beforeunload', function (e) {
var isEdit = '<%=FormMastPage.ViewMode%>';
if (window.is_confirm !== false && isEdit == Enumerator.ItemViewMode.AllEdit) {
var message = '<%=this.GetRes("Msg_CheckPageEditMode")%>';
e.returnValue = message;
}
})
.bind('mouseover mouseleave', function (event) {
is_confirm = event.type == 'mouseleave';
});
 
JAVASCRIPT写法:
[removed] = function (event) {
var event = event || window.event;
// 兼容IE8和Firefox 4之前的版本
if (event) {
event.returnValue = "确定要关闭窗口吗?";
}
// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
return '确定要关闭窗口吗>现代浏览器?';
}


如果是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; 
[removed]=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>


更多栏目