添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
玩命的脸盆  ·  2023年6月16日 ...·  6 月前    · 
一身肌肉的麦片  ·  Which Java library ...·  11 月前    · 
强悍的茄子  ·  CVPR2022 | ...·  1 年前    · 

一、相关的方法

浏览器的刷新和关闭都触发 onbeforeunload 和 onunload

onbeforeunload:在页面刷新和关闭的时候触发事件,表示正要去服务器读取新的页面时调用,此时还没开始读取。

onunload:则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。

onload:当资源已加载时被触发。

onbrforeunload和onunload都会在刷新和关闭页面是触发,但是onbeforeunload在onunload之前执行,并且它还可以阻止onunload的执行。
那么在页面刷新时执行顺序就是onbeforeunload、onunload、onload。

二、兼容说明

不同浏览器对事件的处理

IE浏览器 页面跳转、刷新页面能执行,但关闭浏览器不能执行;
firefox 页面跳转能执行,但刷新页面、关闭浏览器不能执行;
Safari 刷新页面、页面跳转,关闭浏览器都会执行;
Opera、Chrome任何情况都不执行。

onbeforeunload和onunload在谷歌和火狐中,必须先按F12打开开发者模式,刷新或关闭网页,才会用提示框 。而且不能连续刷新,如刷新第一次有提示框接着刷新第二次,就变成直接刷新没有提示框。但是如果2次刷新时间间隔在30秒左右,则第二次刷新会有提示框。如果不按F12打开开发者模式,谷歌和火狐在onbeforeunload事件触发时都不会有提示框,会直接刷新或关闭页面。

onbeforeunload中的return是自定义提示信息,并且如果没有return在谷歌中是不会有反应,ie则不会出现这个情况。
onunload事件也只有在ie中才起作用,在其他浏览器中也没有反应。

有时候我们会发现,在Chrome或Firefox中连续刷新不起作用,或者点击关闭按钮没有弹窗提醒。但是如果在事件方法体内执行console控制台又有输出。
其实是因为要触发浏览器自带的关闭弹窗,用户必须跟网页有过交互。简单的来说就是点击过网页。
连续刷新时,因为你没有点击过网页内部,所以无法触发。
刚一打开页面就点击关闭时,同理也无法触发。另外,Chrome及Firefox无法修改提示文字。

componentWillMount () {
    // 拦截判断是否离开当前页面
    window.addEventListener('beforeunload', this.beforeunload);
  componentWillUnmount () {
    // 销毁拦截判断是否离开当前页面
    window.removeEventListener('beforeunload', this.beforeunload);
  beforeunload (e) {
    let confirmationMessage = '你确定离开此页面吗?';
    (e || window.event).returnValue = confirmationMessage;
    return confirmationMessage;

参考链接:

Window: beforeunload event

本文实例总结了JS针对浏览器窗口关闭事件的监听方法。分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) [removed] [removed]=onclose; function onclose() if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey) return "您要离开吗?"; [removed] 方式二:适用于IE和FF,不区分刷新关闭
用户离开页面的时候可以提示用户 private mounted() { window.addEventListener('beforeunload', this.beforeunloadHandler, false) window.addEventListener('unload', this.unloadHandler, false) private beforeDestroy() { window.removeEventListener('beforeunload'
需求1:H5游戏,在用户切换了标签页,(游戏界面处于非当前页面)暂停游戏 需求2:在线教学视频,在用户切换了标签页或者关闭浏览器后,暂停视频播放,并及时记录观看时间,发送到后台程序 主要是利用两个API:document.onvisibilitychange 和window.onbeforeunload...
浏览器的后退事件 浏览器的后退按钮,默认是返回上一个路径的页面,可是如果我们当前的页面有数据没有被保存的话,点击后退按钮应该加一层判断,也是提示用户是否需要去保存页面的内容。如果不保存,直接返回。所以需要阻止浏览器的后退按钮,只有在满足了条件后才执行事件 //1 首先进入页面的时候需要监听浏览器的后退按钮,之后在操作的时候执行函数,在mounted中挂载去监听这个事件,并在methods里面添加函数,用来判断执行的条件 mounted() { if (window export default { mounted () { window.addEventListener('beforeunload', e => this.beforeunloadHandler1(e))
### 回答1: 在Web开发中,经常需要通过JavaScript来监听浏览器关闭刷新事件。可以使用window对象的beforeunload和unload事件来实现这个功能。 beforeunload事件会在用户关闭页面时触发,可以用来在用户离开前提示一些消息。可以通过window.onbeforeunload属性来绑定beforeunload事件处理程序。 当用户点击确定按钮时,页面将被关闭,如果用户点击取消按钮,则页面将保持不变。在beforeunload事件处理程序中,可以通过返回一个非空字符串来提示用户需要保存的未完成操作。 unload事件会在页面完全卸载后触发,可以用来清除一些资源,例如定时器和事件监听器等。可以通过window.onunload属性来绑定unload事件处理程序。 需要注意的是,对于浏览器关闭事件,不同的浏览器有不同的支持方式和行为,因此,在实现监听浏览器关闭刷新事件时,需要进行兼容性测试,以保障其在不同的浏览器中的稳定性和可靠性。 总的来说,通过使用 JavaScript 监听浏览器关闭刷新,可以处理一些必要的业务逻辑,从而提升用户体验和应用稳定性。 ### 回答2: JavaScript 可以监听浏览器关闭刷新等事件,以促进更好的用户体验。这些事件通常是用户主动进行的,但也有可能是浏览器崩溃或其他不可预测的情况引发的。 要监听浏览器关闭事件,可以使用 window.onbeforeunload 事件。这个事件将在浏览器窗口将要关闭之前触发。可以将要执行的代码放在这个事件的回调函数中,以便在用户关闭浏览器时执行。 要监听浏览器刷新事件,可以使用 window.onbeforeunload 事件和 window.onload 事件。在页面加载时,window.onload 事件会被触发。然后,如果用户刷新了页面,window.onbeforeunload 事件会在页面重新加载之前被触发。可以使用这些事件来保存当前页面的状态,并在页面重新加载时恢复状态。 要注意的是,浏览器的不同版本和不同设置可能会影响这些事件的行为。有些浏览器可能不允许在 onbeforeunload 事件中弹出警告框或确认框,而有些浏览器则可以。因此,需要谨慎处理这些事件,并确保它们不会对用户造成不必要的干扰或安全风险。 综上所述,JavaScript 监听浏览器关闭刷新事件可以帮助我们提供更好的用户体验,并确保我们的网站和应用程序在这些情况下仍然能够正常使用。 ### 回答3: JS 监听浏览器关闭刷新是 Web 开发中比较常见的需求,主要涉及到浏览器事件的监听和处理。比如在某些场景下,当用户关闭浏览器刷新页面时,需要提醒用户或执行一些特定的操作。 浏览器关闭事件监听: JS 监听浏览器关闭主要通过 `window` 对象提供的 `beforeunload` 事件来实现。`beforeunload` 事件在浏览器卸载页面之前被触发,可以用来防止用户误操作或提醒用户保存数据。 例如,在页面中添加以下 JS 代码,就能监听浏览器关闭事件: window.addEventListener('beforeunload', function(event) { event.preventDefault(); return event.returnValue = '确定离开此页面吗?'; 上述代码中,我们使用 `addEventListener` 方法绑定了 `beforeunload` 事件的监听器。在事件回调函数中,我们使用 `event.preventDefault()` 方法来阻止浏览器默认的关闭行为,并返回一个提示用户的字符串,如果用户确认离开页面,才能真正关闭页面。 浏览器刷新事件监听: JS 监听浏览器刷新主要通过 `beforeunload` 和 `unload` 事件组合使用实现。当用户刷新页面时,会先触发 `beforeunload` 事件,然后触发 `unload` 事件。 例如,在页面中添加以下 JS 代码,就能监听浏览器刷新事件: window.addEventListener('beforeunload', function(event) { // Do something before refreshing window.addEventListener('unload', function(event) { // Do something after refreshing 上述代码中,我们分别使用 `addEventListener` 方法绑定了 `beforeunload` 和 `unload` 事件的监听器,并在事件回调函数中分别执行了特定的操作。 需要注意的是,由于 `beforeunload` 事件可以阻止浏览器关闭刷新页面,因此在使用它时需要谨慎考虑,以避免影响用户体验和引起安全问题。