精华内容
下载资源
问答
  • vue 监听网页关闭/浏览器关闭事件
    千次阅读
    2021-09-16 17:31:50

    1.methods中定义窗口关闭/浏览器关闭之后处理内容,例如删除cookie、session、local storage 等

    methods: {
        beforeunloadHandler(e) {
          console.log('关闭窗口之后')
        }
    }
    

    2.mounted 绑定窗口关闭监听事件

    
    mounted() {
        window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
    }
    

    3.destroyed 解绑事件

    
    destroyed() {
        window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
    }
    

    以上方法刷新页面也会触发
    仅监听浏览器关闭事件,

    参考地址

    更多相关内容
  • vue 监听浏览器关闭事件vue做的项目,有个需求就是关闭浏览器的时候,需要往后台提交有个接口,来监听这个账号有没有下线。 第一步 data里放好要用到的变量 //声明遍历 data() { return { _beforeUnload_time:'...

    vue 监听浏览器关闭事件

    用vue做的项目,有个需求就是关闭浏览器的时候,需要往后台提交有个接口,来监听这个账号有没有下线。

    第一步 data里放好要用到的变量
    //声明遍历
    data() {
          return {
          _beforeUnload_time:'',
            _gap_time:'',    
          }
    }
    
    第二步 监听
     mounted() {
        window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
        window.addEventListener('unload', e => this.unloadHandler(e))
      },
     destroyed() {
        window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
        window.removeEventListener('unload', e => this.unloadHandler(e))
      },
    
    第三步 必须使用同步请求

    此处用的是post方法,默认的contentType接口报错了。
    设置好contentType后,报错‘unexpected token o in JSON at position ’ ,后端拿不到值。将参数先用JSON.stringify()转成 JSON字符串就好了。

     methods: {
        beforeunloadHandler(e){
          this._beforeUnload_time = new Date().getTime();
          //e.returnValue = '关闭提示'; 弹窗
        },
        unloadHandler(e){
          this._gap_time = new Date().getTime() - this._beforeUnload_time;
          //判断是窗口关闭还是刷新
          if (this._gap_time <= 5) {
            let datas = {
              objCode:null,
              opertion:'退出登录ajax',
              param:null,
              path:null,,}
            datas =  JSON.stringify(datas)
            $.ajax({
              url: this.$apiUrl.user.oper,
              type: 'post',
              contentType:'application/json',
              data:datas,
              dataType: "json",
              async: false, //或false,是否异步
            })
          }
        },
      },
    
    展开全文
  • 1、使用[removed]之类的API [removed] = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的...2、在生命周期钩子中注册监听事件 methods: { beforeunloadHandler (e) { // ... } } 在 mounted
  • Vue监听浏览器窗口关闭事件

    千次阅读 2022-03-16 09:52:13
    Vue监听浏览器窗口关闭事件,并在窗口关闭时进行操作 杰哥他们让我整理一下浏览器窗口关闭事件这个需求的实现给你 参考一下这三篇文章实现起来应该不难 ...onunload和onbeforeunload都是在页面刷新和关闭前的动作,...

    Vue中监听浏览器窗口关闭事件,并在窗口关闭时进行操作

    参考一下这三篇文章实现起来不难

    https://blog.csdn.net/qq_41547882/article/details/114304782
    https://www.jianshu.com/p/021beaeee526
    https://www.jianshu.com/p/93f011981a47

    onunload和onbeforeunload都是在页面刷新和关闭前的动作,但是onbeforeunload是先于onunload的,并且 onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到

    页面加载:onload
    页面关闭:onbeforeunload →onunload
    页面刷新:onbeforeunload →onunload→onload

    展开全文
  • 监听浏览器关闭事件的解决方案

    千次阅读 2020-12-21 11:06:37
    在web项目开发中,关于浏览器关闭事件有两个很常见的问题:为什么我没有监听浏览器关闭事件? 我监听到了这个事件,但写在事件里的异步请求为什么发送不成功?原因分析:这两个问题无外乎两个原因:浏览器关闭事件未...

    在web项目开发中,关于浏览器关闭事件有两个很常见的问题:为什么我没有监听浏览器关闭事件? 我监听到了这个事件,但写在事件里的异步请求为什么发送不成功?

    原因分析:这两个问题无外乎两个原因:浏览器关闭事件未被触发 和 异步请求发送失败。

    原因1:关闭浏览器时一定会触发事件吗?如果不一定,那什么条件下才不触发呢?

    与浏览器关闭事件相关事件有onunload和onbeforeunload两个。区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。因此我们着重关注onbeforeunload事件。简单科普一下onbeforeunload事件。

    当窗口即将被卸载(关闭)时,会触发该事件.此时页面文档依然可见,且该事件的默认动作可以被取消. 该函数应当返回一个字符串,当返回的字符串不为null或者undefined时,弹出确认窗口让用户自行选择是否关闭当前页面。一些浏览器将该事件返回的字符串显示在弹出窗上。

    既然“当窗口即将被卸载(关闭)时,会触发该事件“,那也就是说只要我关闭快就一定会触发该事件喽?然而当关闭浏览器时,未必一定会触发onbeforeunload事件。MDN上关于这个事件的触发条件是这样描述的。

    为避免意外弹出窗口,除非页面已与之交互,否则浏览器可能不会显示在beforeunload事件中创建的提示,甚至根本不会显示它们。

    那什么时候算是非与之交互呢?这里举个例子,一个页面连着刷新两次,第二次刷新时,就认为非与之交互,就不会触发onbeforeunload事件。,同时对于触发条件,各个浏览器之间也存在差异。具体差异汇总表如下:

    说明一下,浏览器关闭事件(onbeforeunload)里已经不可以自定义弹出窗信息了。MDN中明确写道:

    一些浏览器将该事件返回的字符串显示在弹出窗上。但从Firefox 4、 Chrome 51、Opera 38 和Safari 9.1开始,通用确认信息代替事件返回的字符串。

    原因2:异步请求发送失败了吗?

    一定失败。原因发送异步请求后,随即关闭了浏览器,这时候这次请求的”三次握手”的”第三次握手”,客户主机便不会响应服务器主机,这也就成了一个失败的请求。如图所示。

    第三次握手失败

    那么有什么解决办法吗?

    关闭浏览器时发送同步请求,来保证请求发送完成。但是这样一来会产生如下问题:

    a)      页面延迟几秒后再关闭,体验糟糕。

    b)      XMLHttpRequest规范中禁止在这个事件处理器中同步调用接口。

    使用 XMLHttpRequest 发送同步请求的方式已经计划从规范中删除,不再建议开发者使用。

    这个时候不熟悉XMLHttpRequest的同学也许会问:等一下,我的代码里根本就没有XMLHttpRequest这个对象,所以他的规范凭什么约束我?

    相信你项目里调用接口时已经用到了ajax库,或者axios库。其实现有的ajax库都是对XMLHTTPRequest对象的一种封装,而axios是通过promise实现对ajax技术的一种封装,这样一来一切都说得通了。原来我们都在直接或者间接的使用着XMLHttpRequest对象。

    2.Fetch 的keepalive属性

    Fetch API提供了一套健壮的与服务器端交互的方式,提供了跨越不同平台 API 的一致接口。它提供了一个keepalive属性,保证不管发送请求的页面关闭与否,请求都会持续直到结束。不过上传数据的限制是64 KB。写法如下:

    window.addEventListener(‘onbeforeunload’, {

    fetch('/siteAnalytics', {

    method:'POST',

    body: getStatistics(),

    keepalive:true});

    }

    那通过Fetch API调用的接口如何添加头信息呢?以添加token为例,以下代码亲测有效。

    window.addEventListener(‘onbeforeunload’, {

    fetch('/siteAnalytics', {

    method:'POST',

    body:'id=' + id + '&name=' + name + '&age=' +age,

    headers: {'Content-Type': 'application/x-www-form-urlencoded',

    token:’ myToken’

    },

    keepalive:true});

    }

    3.SendBeacon()

    SendBeacon() 方法可用于通过HTTP将少量数据异步传输到Web服务器。该方法底层的使用的是 Fetch API,这样就能明白为什么它也有少量数据(64 KB)的上传数据限制,也能明白为什么它还能在页面卸载后继续请求。它的主要优点是简单,只要用一行代码就能搞定。

    window.addEventListener('unload', {

    navigator.sendBeacon('/siteAnalytics', getStatistics());

    }

    总结一下,对于浏览器关闭事件,如果我们与页面未发生交互,那么当窗口即将被卸载(关闭)时便不会触发onbeforeunload事件;同时一些主流浏览器,从某个版本开始,也不允许我们自定义弹窗信息来给予用户友好提示了;如果想在该事件中发送请求,相对于使用XMLHttpRequest对象来说,fetch API或者sendBeacon()或是更好的选择。

    展开全文
  • 但是发现 beforeDestroy 只能监听到页面间的跳转,无法监听到页面刷新和关闭标签页。 所以还是要借助 onbeforeunload 事件。 顺便复习了一下 JavaScript 中的一些加载,卸载事件: 页面加载时只执行 onload 事件...
  • 今天测试给我报了个bug说点击浏览器返回页数据显示的不对,我查了半天原因:需要监听浏览器的回退按钮,并阻止其默认事件。 具体操作方法如下: 1、挂载完成后,判断浏览器是否支持popstate mounted(){ if (window...
  • Vue-监听浏览器关闭

    2021-05-14 10:30:31
    // 监听浏览器关闭 window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) window.addEventListener('unload', e => this.unloadHandler(e)) }, destroyed() { window....
  • 主要介绍了Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • window.onload事件 设置页面加载时执行的动作,即进入页面的时候执行的动作。 window.onunload 已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用,一般用于设置当离开页面以后执行的动作。 ...
  • vue做的项目,有个需求就是关闭...主要困惑点:1、浏览器关闭事件,是什么onbeforeunload、onunload 又是各种百度,window.addEventListener( ‘beforeunload’,e =>(执行…) )mounted () {window.addEventL...
  • vue监听浏览器关闭方法

    万次阅读 2018-10-31 16:31:25
    我需要在页面关闭时清空本地储存的一个cookie 方法: window.addEventListener( ‘beforeunload’,e =&amp;gt;( 执行… ) ) mounted () { window.addEventListener('beforeunload', e =&amp;gt; { ...
  • 注意:区分不了浏览器是触发了刷新还是关闭,而且提示的弹框是无法自定义的;如果有大佬有方法能区分,还请评论学习一下!感谢! 代码可直接复制: <template> <div /> </template> <script...
  • vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求1.需求背景:2.需求分析:3.实现方式:4.实现方式解析:1)浏览器页面事件基础2)在mounted监听beforeunload和unload事件5.存在的问题/风险点:1)为了...
  • vue监听浏览器的后退和刷新事件 浏览器的后退事件 浏览器的后退按钮,默认是返回上一个路径的页面,可是如果我们当前的页面有数据没有被保存的话,点击后退按钮应该加一层判断,也是提示用户是否需要去保存页面的...
  • vue 监听浏览器刷新

    万次阅读 2018-12-05 02:31:00
    1.在mounted中加入如下代码 ...'关闭提示' } return '关闭提示' } 复制代码 3. 最后销毁 destroyed () { window.removeEventListener( 'beforeunload' , e => this.beforeunloadHandler(e)) }, 复制代码
  • //浏览器关闭 if (_gap_time ) { window.localStorage.removeItem("havePlay"); } }//skinLayout设置只显示全屏和音量按钮 //点击播放后调打点方法 //视频由暂停恢复为播放时触发。 that.player.on('completeSeek', ...
  • vue监听浏览器窗口关闭

    千次阅读 2020-09-11 17:34:15
    vue监听浏览器窗口关闭 需求:后端需要在用户退出或者关闭页面的时候调用一个接口 相关技术点: 页面关闭和刷新时, 触发 beforeunload事件 当文档或一个子资源正在被卸载时, 触发 unload事件,unload在beforeunload...
  • js/vue监听浏览器刷新和关闭方法

    千次阅读 2022-03-22 10:35:46
    // 浏览器关闭也会执行,在unloadHandler()方法之前执行 }, // 关闭 unloadHandler(){ this._gap_time = new Date().getTime() - this._beforeUnload_time if (this._gap_time ) { console.log('...
  • 方案:用户登录、关闭浏览器或者标签页时向后端发送请求,用以统计登录/登出时间、登录率 解决方案 export default { name: 'APP', mounted() { this.watchTabUnload() }, methods: { watchTabUnload() { ...
  • vue监听浏览器

    2019-03-28 17:39:04
    需求: 在浏览器打开一个页面当返回或关闭的时候 弹出提示框 1、挂载完成后,判断浏览器是否支持popstate mounted(){ if (window.history && window.history.pushState) { history.pushState(null, null...
  • 主要介绍了vue 弹窗时 监听手机返回键关闭弹窗功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值(页面不跳转) ,需要的朋友可以参考下
  • vue JS实现监听浏览器返回按键事件

    千次阅读 2019-06-13 11:37:00
    vue JS实现监听浏览器返回按键事件 // 这个是监听浏览器回退键的 returnButton () { let vm = this; $(document).ready(function () { if (window.history &...
  • // onunload 发生于当用户离开页面时发生的事件(通过点击一个连接,提交表单,关闭浏览器窗口等等。刷新也会触发) 刷新和关闭浏览器时先触发onbeforeunload再触发onunload 刷新时两次触发的间隔普遍在60毫秒以上 ...
  • vue监听游览器关闭刷新事件

    千次阅读 2019-05-06 15:59:43
    vue监听按钮事件 参考资料链接:https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event 成果图: google游览器 刷新监听: 关闭监听: IE 版本11以上 关闭和刷新IE游览器: 监听火狐关闭和...
  • VUE监听页面刷新和关闭事件

    千次阅读 2021-11-19 16:01:03
    Vue+Element,公司看板的使用人大多利用谷歌浏览器查看。。 前端请求权限流程:用户登陆后会把用户的信息加密处理放进cookies,,然后会用vue的拦截器,,拦截要发送的请求,,并且在每个请求的headers里面带上...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,114
精华内容 3,245
关键字:

监听浏览器关闭事件 vue