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