源于生活

标题: JS关闭离开页面时弹出警告提醒 [打印本页]

作者: kevin-ying 时间: 2015-8-6 16:20
标题: JS关闭离开页面时弹出警告提醒
在做后台的时候，有一个文章编辑页面。
之前一直没有怎么在乎细节功能的完善，直到今天我编辑了一大段文字后因为手抖不小心关闭了浏览器，导致我打了半个小时的文字全部消失了，于是，我在想，我该给这个页面做一个体贴的小功能了，那就是点击关闭或者离开页面时弹出提醒警告。
这个当然用JS简单的写一下就可以了，我把这个效果做上去之后，想想，还是记录一下吧。

首先，可能涉及到或者可以使用的事件函数有这样两个，onbeforeunload 和 onunload
下面，我就来简述一下这两个事件函数。

1、onbeforeunload事件：
说明：目前三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持。
用法：object.onbeforeunload = handler;
描述：事件触发的时候弹出一个有确定和取消的对话框，确定则离开页面，取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。
触发于：
关闭浏览器窗口
通过地址栏或收藏夹前往其他页面的时候
点击返回，前进，刷新，主页其中一个的时候
点击一个前往其他页面的url连接的时候
调用以下任意一个事件的时候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit.
当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候
重新赋予location.href的值的时候
通过input type=”submit”按钮提交一个具有指定action的表单的时候

可以用在以下元素：
body, frameset, window
平台支持：IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+
示例1：

window.onbeforeunload = onbeforeunload_handler;
function onbeforeunload_handler(){
return "页面未保存，确认离开吗？";
}

复制代码

示例2：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>onbeforeunload测试</title>
<script>
function checkLeave(){
event.returnValue="确定离开当前页面吗？";
}
</script>
</head>
<body onbeforeunload="checkLeave()">
</body>
</html>

复制代码

2、onunload事件
用法：object.onbeforeunload = handler
描述：当用户关闭一个页面时触发 onunload 事件
触发于：
关闭浏览器窗口
通过地址栏或收藏夹前往其他页面的时候
点击返回，前进，刷新，主页其中一个的时候
点击一个前往其他页面的url连接的时候
调用以下任意一个事件的时候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit.
当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候
重新赋予location.href的值的时候
通过input type=”submit”按钮提交一个具有指定action的表单的时候

示例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>onunload测试</title>
<script>
function checkLeave(){
alert("欢迎下次再来！");
}
</script>
</head>
<body onunload="checkLeave()">
</body>
</html>

复制代码

一个判断页面是否真的关闭和刷新的好方法：

window.onbeforeunload=function (){
alert("===onbeforeunload===");
if(event.clientX>document.body.clientWidth && event.clientY < 0 || event.altKey){
alert("你关闭了浏览器");
}else{
alert("你正在刷新页面");
}
}

复制代码

这段代码就是判断触发onbeforeunload事件时，鼠标是否点击了关闭按钮，或者按了ALT+F4来关闭网页，如果是，则认为系统是关闭网页，否则在认为系统是刷新网页。

欢迎光临源于生活 (http://bbs.vingoo.info/)