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

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

创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的防城网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

这里就给大家讲讲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.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8.   
    9. 
  
  
  
  
  9. 该实例演示了如何向 body 元素添加 "onbeforeunload" 事件。
     
    10. 
  
  
  
  
  10. 关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。
     
    11. 
  
  
  
  
  11. 博客地址      
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13.   
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15.  
    16.

方式二:javascript中添加

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. 菜鸟教程(runoob.com) 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8.   
    9. 
  
  
  
  
  9. 该实例演示了如何使用 HTML DOM 向 body 元素添加 "onbeforeunload" 事件。
     
    10. 
  
  
  
  
  10. 关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。
     
    11. 
  
  
  
  
  11. 点击调整到菜鸟教程 
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13.   
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15.  
    16.

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

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8.   
    9. 
  
  
  
  
  9. 该实例演示了如何使用 addEventListener() 方法向 body 元素添加 "onbeforeunload" 事件。
     
    10. 
  
  
  
  
  10. 关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。
     
    11. 
  
  
  
  
  11. 跳转地址 
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13.   
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15.  
    16.

onunload():

方式一：html元素中添加

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.      
    5. 
  
  
  
  
  5.      
    6. 
  
  
  
  
  6.         function fun() { 
    7. 
  
  
  
  
  7.             // dosomethings 
    8. 
  
  
  
  
  8.         } 
    9. 
  
  
  
  
  9.      
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12.   
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14.  
    15.

方式二：javascript添加

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.      
    6. 
  
  
  
  
  6.      
    7. 
  
  
  
  
  7.     window.onunload = function() { 
    8. 
  
  
  
  
  8.         // dosomethings 
    9. 
  
  
  
  
  9.     }; 
    10. 
  
  
  
  
  10.      
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12.   
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15.   
    16. 
  
  
  
  
  16.  
    17.

【本文为专栏作者“太平洋警察”的原创稿件，转载请通过作者获取授权】

分享名称：Javascript如何监听页面刷新和关闭事件
文章URL：http://www.shufengxianlan.com/qtweb/news31/192031.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站改版知识

各行业网站

域名ssl证书　　 　成都能净科技　　 　云锦斋建筑　　 　网站建设　　 　马边网站建设　　 　微博营销　　 　南部网站建设　　 　盐亭网站设计　　 　腾讯云香港免备案空间　　 　手机APP开发　　 　中国电信西部信息中心机房　　 　成都seo优化　　 　成都定制网站　　 　网站改版维护　　 　网站收录　　 　绵阳网站制作　　 　云服务器　　 　全网整合营销推广　　 　微官网开发　　 　企业网站建设