onbeforeunload与onunload事件


2007-12-19 10:25:00
标签:onbeforeunload 事件 onunload 编程   [推送到技术圈]
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="[url]http://www.w3.org/1999/xhtml[/url]">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
   <title>onbeforeunload测试</title>
   <script>
   function checkLeave(){
         event.returnValue="确定离开当前页面吗?";
   }
   </script>
   </head>
   <body οnbefοreunlοad="checkLeave()">
   </body>
   </html>

 
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="[url]http://www.w3.org/1999/xhtml[/url]">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
   <title>onunload测试</title>
   <script>
   function checkLeave(){
         alert("欢迎下次再来!");
   }
   </script>
   </head>
   <body οnunlοad="checkLeave()">
   </body>
   </html>

本文出自 51CTO.COM技术博客

onbeforeunload与onunload事件相关推荐

  1. onbeforeunload与onunload事件总结:

    1)异同点 相同点:onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body> ...

  2. onbeforeunload与onunload事件(转)

    Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script> 脚本中通过window.onunload来指定或者在<body>里指定.区别在于o ...

  3. javascript onbeforeunload与onunload事件

    Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定.区别在于on ...

  4. onbeforeunload与onunload事件 1

    Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过 window.onunload来指定或者在<body>里指定.区别在于o ...

  5. h5页 点击返回时关闭_H5页面监听浏览器关闭、刷新、跳转时提示之onbeforeunload和onunload事件...

    在H5页面中一些场景情况下防止表单数据丢失或者防止用户意外跳走页面,通过js进行监听提示用户,通过onbeforeunload事件和onunload事件实现. onbeforeunload和onunl ...

  6. 获取页面离开onbeforeunload与onunload事件的返回值

    转自:http://www.cssha.com/?p=209 在各种项目开发的过程中,页面离开事件onbeforeunload是我们经常要用到的,可以避免用户操作失误,给用户一个选择的机会,就比如我们 ...

  7. onbeforeunload不触发_用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)

    Onunload,onbeforeunload都是在刷新或关闭时调用,可以在 Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时 ...

  8. Javascript的onbeforeunload onunload事件

    简介 onunload,onbeforeunload都是在页面刷新或关闭时调用. 区别在于 onbeforeunload在onunload之前执行,它还可以阻止onunload的执行. onbefor ...

  9. html页面退出用什么函数,离开网页弹窗函数onbeforeunload与onunload

    onbeforeunload onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发. 该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面. 对话框默认的提示信息根据不同 ...

最新文章

  1. 如何 搭建 RMAN 备份平台
  2. linux POSIX 信号集,读书笔记:第10章 Posix信号量 (6)
  3. Git commit message和工作流规范
  4. 超级的全中文语音数据集合
  5. [原创]Paros工具培训介绍
  6. 强化学习(四)—— DQN系列(DQN, Nature DQN, DDQN, Dueling DQN等)
  7. 深入探究 Win32 PE 文件格式
  8. java购物菜单的选择功能_java-第四章-升级我行我素购物管理系统,实现购物菜单的选择...
  9. Android SwipeRefreshLayout 、RecyclerView冲突下拉冲突的解决方案
  10. SQL Server 2005无法输入中文的解决方案
  11. 简陋版:基于python的自动化测试框架开发
  12. 关于Android中获取Intent里的数据
  13. asp.net gridview 为什么只显示一行数据_为什么中位数(大多数时候)比平均值好
  14. WordPress我安装成功了,容易!
  15. 用Python执行SQL、Excel常见任务?10个方法全搞定!
  16. 安卓设备java代码编辑器_15款android设备上的代码编辑器,超级方便!-Go语言中文社区...
  17. 利用python绘制科赫雪花
  18. 优化设计-混合惩罚函数法-MATLAB编程
  19. Spring集成activiti
  20. bind dlz mysql rpm_BIND+DLZ+MYSQL | 学步园

热门文章

  1. HD 1176 免费馅饼 (DP)
  2. 经典算法——KMP模式匹配
  3. NYOJ 598 旋转圆柱矩阵
  4. bzoj1188: [HNOI2007]分裂游戏
  5. 让PHP程序永远在后台运行
  6. Siverlight5新功能/改进总结
  7. 机器学习(一)梯度下降算法
  8. leetcode刷题实录:3
  9. C++实现字符全排列
  10. 转盘在转动的同时ajax异步加载,用jQuery旋转插件jqueryrotate制作转盘抽奖.pdf