文档章节

onbeforeunload与onunload事件

Gooiem
 Gooiem
发布于 2015/08/18 11:26
字数 891
阅读 130
收藏 2

Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过 window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行,它还可 以阻止onunload的执行。

  Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读 取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。Onunload是无 法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。

1、onbeforeunload事件:
  说明:目前三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持。
用法:
·object.onbeforeunload = handler 
·<element onbeforeunload = “handler” … ></element> 
描述:
事件触发的时候弹出一个有确定和取消的对话框,确定则离开页面,取消则继续待在本页。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+ 
  示例:

<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>


 

 

但是onbeforeunload有个小毛病,就是页面刷新时,他还是会调用到onbeforeunload,为什么?其实刷新就相当于关闭了这个IE再重新打开的意思,因此还是会调用到onbeforeunload。

 究竟怎么解决刷新不调用onbeforeunload呢?

 网上提供很多方法,本人觉得最实用还是以下这段JS

 

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("是刷新而非关闭");   
     }   
}


2、onunload事件
用法:
·object.onbeforeunload = handler 
·<element onbeforeunload = "handler"></element>

  描述:
当用户关闭一个页面时触发 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>



参考链接:(W3C的HTML草案关于onbeforeunload的说明)

                http://www.w3.org/TR/html5/webappapis.html#handler-window-onbeforeunload 

                (mozilla 关于onbeforeunload的说明)                

                https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onbeforeunload

                (microsoft关于beforeunload | onbeforeunload event的说明

                https://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx


本文转载自:http://www.cnblogs.com/fredlau/archive/2009/06/10/1500490.html

Gooiem
粉丝 7
博文 41
码字总数 14564
作品 0
昌平
程序员
私信 提问
用js判断页面刷新或关闭的方法

用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件) Onunload,onbeforeunload都是在刷新或关闭时调用,可以在

COLIN前端
2015/12/02
202
0
js判断离开页面刷新或关闭的方法

今天在做日新图库的时候遇到个问题,用户上传模块中,上传是用了一个SWFUpload的上传插件,上传是ajax实现 的,假设用户上传了图片,并没有提交图集,而是离开了页面,关闭浏览器或者刷新了页面...

前台满300减30
2012/02/03
508
1
模态窗口的关闭确认和事件执行

最近在做一个测评系统,涉及到防止用户半途有意或者无意退出测评,需要在关闭子窗口时确认关闭操作,并在确认后让父窗口执行跳转的事件。这些功能可以通过window的onunload和onbeforeunload实...

wen1512
2016/11/02
265
0
使用onbeforeunload事件检测窗口是否刷新或关闭

onunload,onbeforeunload 在页面刷新或关闭时调用,区别在于: onbeforeunload 是在页面刷新或关闭前触发,这时浏览器并未请求服务器读取新页面,因此onbeforeunload是可以阻止页面更新或关...

蜗牛奔跑
2016/03/07
67
0
使用onbeforeunload事件检测窗口是否刷新或关闭 .

onunload,onbeforeunload 在页面刷新或关闭时调用,区别在于: onbeforeunload 是在页面刷新或关闭前触发,这时浏览器并未请求服务器读取新页面,因此onbeforeunload是可以阻止页面更新或关...

ty2538402559
2017/07/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周五乱弹 ——不知道假装开心,装的像么

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :天黑了 你很忧愁, 你说世界上, 找不到四块五的妞, 行走在凌晨两点的马路上, 你疲倦地拿着半盒黄鹤楼。#今日歌曲推荐# 《四块...

小小编辑
今天
2.2K
16
64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
昨天
69
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
昨天
33
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
昨天
119
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
昨天
32
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部