AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Javascript如何监听页面刷新和关闭事件

2017-11-01 4605
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

在我们的日常生活中，时常遇到这么一种情况，当我们在点击一个链接、关闭页面、表单提交时等情况，会提示我们是否确认该操作等信息。

这里就给大家讲讲javascript的onbeforeunload()和onunload()两个事件。

相同点:

两者都是在对页面的关闭或刷新事件作个操作。

不同点：

unbeforeunload()事件执行的顺序在onunload()事件之前发生。(因为，unbeforeunload()是在页面刷新之前触发的事件，而onubload()是在页面关闭之后才会触发的)。

unbeforeunload()事件可以禁止onunload()事件的触发。

onunload()事件是无法阻止页面关闭的。

浏览器的兼容

onunload:

IE6，IE7，IE8 中 刷新页面、关闭浏览器之后、页面跳转之后都会执行;

IE9 刷新页面 会执行，页面跳转、关闭浏览器不能执行;

firefox(包括firefox3.6) 关闭标签之后、页面跳转之后、刷新页面之后能执行，但关闭浏览器不能执行;

Safari 刷新页面、页面跳转之后会执行，但关闭浏览器不能执行;

Opera、Chrome 任何情况都不执行。

onbeforeunload:

IE、Chrome、Safari 完美支持

Firefox 不支持文字提醒信息

Opera 不支持

IE6,IE7会出现bug

示例代码:

onbeforeunload()：

方式一:html元素中添加


 
 
    

  
  
  1. <!DOCTYPE html> 
    2. 

  
  
  2. <html> 
    3. 

  
  
  3. <head> 
    4. 

  
  
  4. <meta charset="utf-8"> 
    5. 

  
  
  5. <title></title> 
    6. 

  
  
  6. </head> 
    7. 

  
  
  7. <body onbeforeunload="return myFunction()"> 
    8. 

  
  
  8.   
    9. 

  
  
  9. <p>该实例演示了如何向 body 元素添加 "onbeforeunload" 事件。</p> 
    10. 

  
  
  10. <p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p> 
    11. 

  
  
  11. <a href="http://www.qqtimezone.top">博客地址</a>      
    12. 

  
  
  12. <script> 
    13. 

  
  
  13. function myFunction() { 
    14. 

  
  
  14.     return "自定义内容"; 
    15. 

  
  
  15. } 
    16. 

  
  
  16. </script> 
    17. 

  
  
  17.   
    18. 

  
  
  18. </body> 
    19. 

  
  
  19. </html> 
    20.

方式二:javascript中添加


 
 
    

  
  
  1. <!DOCTYPE html> 
    2. 

  
  
  2. <html> 
    3. 

  
  
  3. <head> 
    4. 

  
  
  4. <meta charset="utf-8"> 
    5. 

  
  
  5. <title>菜鸟教程(runoob.com)</title> 
    6. 

  
  
  6. </head> 
    7. 

  
  
  7. <body> 
    8. 

  
  
  8.   
    9. 

  
  
  9. <p>该实例演示了如何使用 HTML DOM 向 body 元素添加 "onbeforeunload" 事件。</p> 
    10. 

  
  
  10. <p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p> 
    11. 

  
  
  11. <a href="http://www.runoob.com">点击调整到菜鸟教程</a> 
    12. 

  
  
  12. <script> 
    13. 

  
  
  13. window.onbeforeunload = function(event) { 
    14. 

  
  
  14.     event.returnValue = "我在这写点东西..."; 
    15. 

  
  
  15. }; 
    16. 

  
  
  16. </script> 
    17. 

  
  
  17.   
    18. 

  
  
  18. </body> 
    19. 

  
  
  19. </html> 
    20.

方式三:添加addEventListener()事件(不过此方法IE8以下不支持)


 
 
    

  
  
  1. <!DOCTYPE html> 
    2. 

  
  
  2. <html> 
    3. 

  
  
  3. <head> 
    4. 

  
  
  4. <meta charset="utf-8"> 
    5. 

  
  
  5. <title></title> 
    6. 

  
  
  6. </head> 
    7. 

  
  
  7. <body> 
    8. 

  
  
  8.   
    9. 

  
  
  9. <p>该实例演示了如何使用 addEventListener() 方法向 body 元素添加 "onbeforeunload" 事件。</p> 
    10. 

  
  
  10. <p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p> 
    11. 

  
  
  11. <a href="http://www.qqtimezone.top">跳转地址</a> 
    12. 

  
  
  12. <script> 
    13. 

  
  
  13. window.addEventListener("beforeunload", function(event) { 
    14. 

  
  
  14.     event.returnValue = "我在这写点东西..."; 
    15. 

  
  
  15. }); 
    16. 

  
  
  16. </script> 
    17. 

  
  
  17.   
    18. 

  
  
  18. </body> 
    19. 

  
  
  19. </html> 
    20.

onunload():

方式一：html元素中添加


 
 
    

  
  
  1. <!DOCTYPE html> 
    2. 

  
  
  2. <html> 
    3. 

  
  
  3. <head> 
    4. 

  
  
  4.     <title></title> 
    5. 

  
  
  5.     <script type="text/javascript"> 
    6. 

  
  
  6.         function fun() { 
    7. 

  
  
  7.             // dosomethings 
    8. 

  
  
  8.         } 
    9. 

  
  
  9.     </script> 
    10. 

  
  
  10. </head> 
    11. 

  
  
  11. <body onunload="fun()"> 
    12. 

  
  
  12.   
    13. 

  
  
  13. </body> 
    14. 

  
  
  14. </html> 
    15.

方式二：javascript添加


 
 
    

  
  
  1. <!DOCTYPE html> 
    2. 

  
  
  2. <html> 
    3. 

  
  
  3.   
    4. 

  
  
  4. <head> 
    5. 

  
  
  5.     <title></title> 
    6. 

  
  
  6.     <script type="text/javascript"> 
    7. 

  
  
  7.     window.onunload = function() { 
    8. 

  
  
  8.         // dosomethings 
    9. 

  
  
  9.     }; 
    10. 

  
  
  10.     </script> 
    11. 

  
  
  11. </head> 
    12. 

  
  
  12.   
    13. 

  
  
  13. <body> 
    14. 

  
  
  14. </body> 
    15. 

  
  
  15.   
    16. 

  
  
  16. </html> 
    17.


本文作者：太平洋警察

来源：51CTO

文章标签：
JavaScript
Web App开发
前端开发
关键词：
JavaScript页面
JavaScript页面刷新
行者武松
目录
相关文章
代码掌控者
|
28天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素，但是它们之间有些细微的差别，稍不注意，就很容易弄错！
代码掌控者
43 1
土木林森
|
4月前
|
开发框架 JavaScript 前端开发
揭秘：如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语，再引发服务器端魔法！
【8月更文挑战第16天】在ASP.NET开发中，处理客户端与服务器交互时，常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件，但难以插入客户端逻辑。本文对比此法与改进方案：利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交，增强了灵活性和用户体验，同时确保了服务器端逻辑的执行。
土木林森
51 5
六卿
|
3月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容，支持文本类型文件。在文件读取成功后，可以通过onload事件处理函数获取文件内容，然后展示到页面上。
六卿
113 2
前端JS读取文件内容并展示到页面上
bruce_xiaowei
|
2月前
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用（一）
JavaScript动态渲染页面爬取——Selenium的使用（一）
bruce_xiaowei
63 4
bruce_xiaowei
|
2月前
|
Web App开发 数据采集 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用（二）
JavaScript动态渲染页面爬取——Selenium的使用（二）
bruce_xiaowei
77 2
六卿
|
3月前
|
JavaScript 前端开发
js 回到页面顶部
本文提供了一个JavaScript函数`scrollToTop`，用于平滑滚动页面回到顶部。该函数利用`requestAnimationFrame`和`window.scrollTo`方法逐步减少滚动条距离，直到页面完全回到顶部。
六卿
34 1
Li370234940
|
2月前
|
JavaScript 前端开发 API
JavaScript全屏，监听页面是否全屏
JavaScript全屏，监听页面是否全屏
Li370234940
66 0
html的七十二变
|
3月前
|
JavaScript 前端开发
js怎么定位不同的页面元素
在JavaScript中，有多种方法定位和选择页面元素。
html的七十二变
41 10
bruce_xiaowei
|
2月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
bruce_xiaowei
38 0
bruce_xiaowei
|
2月前
|
存储 JSON JavaScript
JavaScript动态渲染页面爬取——Pyppeteer爬取实战
JavaScript动态渲染页面爬取——Pyppeteer爬取实战
bruce_xiaowei
40 0