`
康敏栋
  • 浏览: 171374 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

离开页面执行 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+
  示例:
     

 
但是onbeforeunload有个小毛病,就是页面刷新时,他还是会调用到onbeforeunload,为什么?其实刷新就相当于关闭了这个IE再重新打开的意思,因此还是会调用到onbeforeunload。
究竟怎么解决刷新不调用onbeforeunload呢?
网上提供很多方法,本人觉得最实用还是以下这段JS



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的表单的时候。
  示例:
       




注:两者在刷新页面的时候都会执行。
  • 大小: 9.6 KB
  • 大小: 7.8 KB
  • 大小: 9.1 KB
分享到:
评论

相关推荐

    浅谈javascript中onbeforeunload与onunload事件

    百度之,有onbeforeunload与onunload这两个事件,但是onbeforeunload在用户刷新的时候也会执行。搞得我弄的挺久的,所以想在这里做一个小小的总结 onbeforeunload与onunload事件 onbeforeunload定义和用法 ...

    用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)

    区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。 Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;而onunload则已经从...

    onbeforeunload与onunload事件异同点总结

    在JavaScript中,`onbeforeunload` 和 `onunload` 是两个重要的页面生命周期事件,它们用于处理用户离开页面的情况。这两个事件在处理用户交互和页面状态的监控方面具有关键作用。 **1) 异同点** **相同点**: - ...

    JS监听关闭浏览器事件之Onunload与Onbeforeunload

    在JavaScript中,对浏览器窗口关闭事件的监听是开发者经常需要用到的功能,这可以帮助我们在用户离开页面时执行一些必要的操作,比如保存数据、清理资源或者显示确认提示。本文将深入探讨两个关键的JavaScript事件:...

    onunload事件判断浏览器是刷新还是关闭窗口

    但是,在实际应用中我们都发现一个问题,刷新浏览器同样会触发 onunload 事件,也就是只要是离开该页面就会触发 onunload 事件,或许刷新时我们并不想执行 onunload 定义的操作,或者我们只想在刷新时执行某操作,...

    javascript Onunload与Onbeforeunload使用小结.docx

    ### JavaScript中的`onunload`与`onbeforeunload`事件详解 #### 一、概述 在JavaScript中,`onunload`和`onbeforeunload`是非常重要的两个事件,它们主要用于监听浏览器窗口关闭或者页面刷新的情况。这两种事件的...

    javascript Onunload与Onbeforeunload使用小结

    JavaScript中的`onunload`和`onbeforeunload`是两个与页面生命周期紧密相关的事件处理函数,它们主要用于在用户离开页面(例如,关闭浏览器窗口、点击刷新按钮或者导航到其他页面)时执行某些操作。这两个事件可以...

    Onload,Onunload和onbeforeunload方法的异同

    在JavaScript的世界里,事件处理是网页交互的核心,而`onload`、`onunload`以及`onbeforeunload`就是三个与页面生命周期紧密相关的事件。理解它们的异同对于优化网页性能和提供更好的用户体验至关重要。 首先,`...

    javascript经典特效---离开页面弹出窗口.rar

    2. `window.onunload`事件:此事件在页面已经卸载之后触发,一般用于清理资源或执行一些必要的操作,因为此时用户已经无法通过点击“取消”按钮回到当前页面。 然而,现代浏览器的安全策略对`onbeforeunload`事件...

    JS监听关闭浏览器事件

    与`onbeforeunload`不同,`onunload`事件是在页面已经被卸载之后触发的,这意味着此时已经没有机会阻止用户离开页面了。因此,`onunload`事件更适用于清理工作,如释放资源、清除定时器等。 ##### 示例代码分析: `...

    判断页面是关闭还是刷新的js代码

    在探讨“判断页面是关闭还是刷新的js代码”这一主题时,我们首先需要理解网页生命周期中的几个关键事件:`onload`、`onunload`、`onbeforeunload`以及`onclose`。这些事件在网页加载、卸载或刷新过程中扮演着重要...

    javascript监听页面刷新和页面关闭事件方法详解

    JavaScript中的`onbeforeunload`和`onunload`事件是页面生命周期中的两个重要事件,它们用于监听和处理用户离开页面的情况,比如页面刷新或关闭。这两个事件可以帮助开发者在用户离开页面前执行某些操作,如保存数据...

    js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)

    总结起来,通过`window.onbeforeunload`事件,开发者可以创建一个用户体验良好的提示机制,来防止用户在未保存工作的情况下不小心离开页面。它不仅可以提醒用户进行保存,还可以提供额外的确认步骤,从而减少数据...

    判断浏览器是刷新还是关闭窗口

    为此,JavaScript 提供了 `onunload` 事件,它会在浏览器窗口被关闭或者用户离开当前页面时触发。然而,在实际的应用场景中,我们可能会遇到一个棘手的问题:不论是刷新页面还是真正关闭窗口,`onunload` 事件都会被...

    JS针对浏览器窗口关闭事件的监听方法集锦

    这些监听方法有助于开发者在用户离开页面之前执行某些操作,如询问用户是否确认离开,或者自动保存数据。然而,现代浏览器可能对`onbeforeunload`事件的处理有所限制,可能不再允许自定义警告消息,而是显示默认的...

    基于JavaScript判断浏览器到底是关闭还是刷新(超准确)

    通常情况下,`onbeforeunload`事件可以用来阻止页面的卸载,向用户显示一个确认对话框询问是否离开当前页面,这对于防止用户因误操作而丢失未保存的信息非常有帮助。然而,在这里,我们更关注于如何利用这些事件来...

    捕捉IE关闭按钮事件

    综上所述,捕捉IE关闭按钮事件主要涉及JavaScript的`onbeforeunload`和`onunload`事件,以及与之相关的浏览器兼容性和现代浏览器的限制。在实际应用中,开发者需要灵活应对,寻找最佳的解决方案,以满足不同环境下的...

    关闭页面时清空Session (ASP.net ) (已实现)

    当用户离开页面或关闭浏览器时,通常不再需要保留其Session信息。这有助于释放服务器资源,并且对于某些应用场景来说,这样做也是出于安全考虑,例如避免敏感信息泄露给其他用户。 #### 2.2 如何清除Session 在ASP...

Global site tag (gtag.js) - Google Analytics