beforeunload事件

1.beforeunload事件:

  beforeunload事件在当页面卸载(关闭)或刷新时调用,事件触发的时候弹出一个有确定和取消的对话框,确定则离开页面,取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。

1 window.addEventListener(‘beforeunload‘,handler);
var handler = function(event) {
            event = event || window.event;
            // 如果内容为空,那么后面就不管了,直接退出
            var _isEmpty = function() {
                var editorForm = document.getElementById(‘editorForm‘);if (/*表单为空*/) {
                    return true;
                }
                return false;
            };

            if (_isEmpty()) {
                return;
            }
            var msg = "您确定不保存您的日志内容就离开页面吗?";
            event.returnValue = msg;
            return msg;
        }

以下操作会触发beforeunload事件

   ·关闭浏览器窗口 
  ·通过地址栏或收藏夹前往其他页面的时候 
  ·点击返回,前进,刷新,主页其中一个的时候 
  ·点击 一个前往其他页面的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+

在页面刷新的情况下不触发该事件:

window.onbeforeunload   =   function(){
      var   n   =   window.event.screenX   -   window.screenLeft;
      var   b   =   n   >   document.documentElement.scrollWidth-20;
      if(b   &&   window.event.clientY   <   0   ||   window.event.altKey)
      {
          alert("是关闭而非刷新");
          window.event.returnValue   =   "是否关闭?";
      }else{
             alert("是刷新而非关闭");
     }
}

  

beforeunload事件

时间: 2024-10-15 06:38:07

beforeunload事件的相关文章

如何取消下载文件的beforeunload事件

js/jQuery中可以为页面绑定beforeunload事件,关闭.刷新.跳转页面时都将触发. 但如果想通过location.href的形式下载文件,它也会触发beforeunload事件. 取消的方法很简单:点击按钮时让window不再监听beforeunload事件,等点击完按钮后再重新为window绑定beforeunload事件. 代码如下: $("button#download").mousedown(function(){ $(window).off('beforeunl

HTML5-常见的事件- beforeunload事件

当我们在日常访问某些网站时,关闭当前网页时出现如下提示: beforeunload 事件就可以完成这样的事情,该事件发生时机:页面卸载之前,可以通过它来取消卸载并继续使用原有页面. 为了显示上面弹出对话框, 必须将IE Fiefox中必须设置event.returnValue 设置为要显示给用户的字符串; 同时作为函数的返回值返回(对Safari和Chrome而言),如下例子 EventUtil.addHandler(window, "beforeunload", function (

JavaScript高级程序设计:第十三章 事件

JavaScript与HTML之间的交互是通过事件实现的. 一.事件流 首先我们要明白事件流的概念.当我们点击一个按钮时,也点击了按钮的容器元素,甚至也点击了整个事件.事件流描述就是从页面中接收事件的顺序.在主流浏览器中有两种事件接收方式.一种是IE提出的事件冒泡流,另一种是Netscape提出的事件捕获流.顾名思义,事件冒泡流是从被点击的最小元素逐渐向上索引DOM树,而事件捕获的思想是不太具体的节点先捕捉到事件,然后事件沿DOM树逐渐向下,一直传播到事件的实际目标. 由于老版本浏览器不支持事件

beforeunload在离开页面前执行业务逻辑

window有个beforeunload事件,是在离开页面前触发的:大家肯定会很快联想到unload这个事件,二者有的区别还是蛮大的,字面上就很好理解,beforeunload在时间线上在unload之前执行,分解点就是页面卸载时间: 经常会有一些在用户离开页面前执行一些业务的应用场景,这都要用到onbeforeunload事件:比如记录用户停留时长的业务,在GA等页面访问统计的应用中都包含这个: 1 ;(function(){ 2 var startTime = Math.ceil(new D

JavaScript事件流原理解析

一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国庆的这段时间来补一补这个不足,也为了国庆后能够更好的完成公司的业务打下基础 二.大致了解什么是JavaScript事件流 首先这里先来举一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta chars

定义页面的Dispose方法:[before]unload事件启示录

前言 最近实施的同事报障,说用户审批流程后直接关闭浏览器,操作十余次后系统就报用户会话数超过上限,咨询4A同事后得知登陆后需要显式调用登出API才能清理4A端,否则必然会超出会话上限. 即使在页面上增添一个登出按钮也无法保证用户不会直接关掉浏览器,更何况用户已经习惯这样做,增加功能好弄,改变习惯却难啊.这时想起N年用过的window.onbeforeunload和window.onunload事件. 本文记录重拾这两个家伙的经过,以便日后用时少坑. 为网页写个Dispose方法 C#中我们会将释

《JavaScript高级程序设计》之事件篇02

事件类型 规定了5中事件,UI事件.鼠标事件.键盘事件.HTML事件.变动(mutation)事件 UI事件 包含DOMActive.DOMFocusIn.DOMFoucusOut 鼠标事件 包含click.dbclick.mousedown(不能通过键盘触发).mouseout(不能通过键盘触发).mouseover(不能通过键盘触发).mouseup(不能通过键盘触发).mousemove(不能通过键盘触发) 事件执行顺序:mousedown -> mouseup -> clik ->

jquery_api(事件一)

一 .unload在火狐,谷歌无法弹出alerta是因为这两个浏览器默认组织alert弹出,unload事件可以进行一些对象销毁,事件解除绑定等清理工作. 如果你想在用户离开页面之前确认是否离开,最好使用beforeunload事件. 二.submit事件,只适用于表单中. 每天进步一点,长久下来就会发生质变!

H5事件

1.contextmenu事件 上下文菜单,即通过单击鼠标右键可以调用上下文菜单.由于contextmenu事件是冒泡的,因此可以为document指定一个事件处理程序,用以处理页面中发生的所有此类事件.这个事件的目标是发生用户操作的元素.通常用从contextmenu事件来显示自定义的上下文菜单,而使用onclick事件处理程序来隐藏该菜单. 2.beforeunload事件 这个事件会在浏览器卸载页面之前触发,可以通过它来取消卸载并继续使用原有页面. 3.DOMContentLoaded事件