源于生活

标题: 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:
  1. window.onbeforeunload = onbeforeunload_handler;
  2. function onbeforeunload_handler(){
  3.    return "页面未保存,确认离开吗?";  
  4. }
复制代码



示例2:
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4.     <title>onbeforeunload测试</title>
  5.     <script>
  6.         function checkLeave(){
  7.             event.returnValue="确定离开当前页面吗?";
  8.         }
  9.     </script>
  10. </head>
  11. <body onbeforeunload="checkLeave()">
  12. </body>
  13. </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的表单的时候

示例:
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4.     <title>onunload测试</title>
  5.     <script>
  6.         function checkLeave(){
  7.             alert("欢迎下次再来!");
  8.         }
  9.     </script>
  10. </head>
  11. <body onunload="checkLeave()">
  12. </body>
  13. </html>
复制代码




一个判断页面是否真的关闭和刷新的好方法:
  1. window.onbeforeunload=function (){
  2.     alert("===onbeforeunload===");
  3.     if(event.clientX>document.body.clientWidth && event.clientY < 0 || event.altKey){
  4.         alert("你关闭了浏览器");
  5.     }else{
  6.         alert("你正在刷新页面");
  7.     }
  8. }
复制代码



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






欢迎光临 源于生活 (http://bbs.vingoo.info/) Powered by Discuz! X3.1