Angular实现监听关闭浏览器,同时做进一步操作

需求:关闭浏览器同时实现退出登录,刷新页面不退出登录

背景:退出登录需要发送请求到后端,后端进行用户信息判断才可退出登录

由于Angular单页面的特性,所以拥有一系列的难点,例如使用:

import { HostListener } from '@angular/core';
  @HostListener('window:beforeunload', ['$event'])
  onWindowClose(event: any): void {
   // Do something
    event.preventDefault();
    event.returnValue = false;
 }

代码实现阻止浏览器关闭前的一个提醒操作,有个缺点就是刷新的同时也会触发,不符合需求。

于是网上查找一番,发现可通过以下方式实现需求:

  export class AppComponent {

      beginTime = 0;//Start time of executing onbeforeunload
      differTime = 0;//时间差

      @HostListener('window:beforeunload', ['$event'])
      onBeforeWindowClose(event: any): void
      {
        this.beginTime = new Date().getTime();
      }

      @HostListener('window:unload', ['$event'])
      onWindowClose(event: 
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值