精华内容
下载资源
问答
  • 主要介绍了Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vue 关闭浏览器窗口的时候,清空localStorage的数据示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • e.returnValue = '关闭提示'; } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ return '关闭提示'; }; 2、在生命周期钩子中注册监听事件 methods: { beforeunloadHandler (e) { // ... } } 在 mounted
  • window.onload事件 设置页面加载时执行的动作,即进入页面的时候执行的动作。 window.onunload 已经从服务器上读到了需要加载的新的页面...onunload和onbeforeunload都是在页面刷新和关闭前的动作,但是onbeforeunl..
    • window.onload事件 设置页面加载时执行的动作,即进入页面的时候执行的动作

    • window.onunload 已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用一般用于设置当离开页面以后执行的动作

    • window.onbeforeunload 是正要去服务器读取新的页面时调用,此时还没开始读取,简单来说就是 在离开页面前的,一般用做提醒问你是不是要离开这个页面

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

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

    在 MDN Web Docs 是这样介绍 window.onunload的:
    在这里插入图片描述

    最终代码整合,可以自己放开 debugger 进行断点测试:

    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))
      },
      methods: {
        beforeunloadHandler (e) {
          // debugger
          this._beforeUnload_time = new Date().getTime()
          console.log('this._beforeUnload_time:', this._beforeUnload_time)
          e = e || window.event
          if (e) {
            e.returnValue = '关闭提示'
          }
          // debugger
          return '关闭提示'
        },
        unloadHandler () {
          console.log('this._beforeUnload_time2:', this._beforeUnload_time)
          this._gap_time = new Date().getTime() - this._beforeUnload_time
          console.log('this._gap_time:', this._gap_time)
          // 判断是窗口关闭还是刷新
          if (this._gap_time <= 5) {
            // debugger
            // 如果是登录状态,关闭窗口前,移除用户
            if (!this.showLoginButton) {
              $.ajax({
                url: '/pictureweb/user/remove',
                type: 'get',
                async: false // 或false,是否异步
    
              })
            }
          } else {
            // debugger
          }
        }
      }
    

    2021.9.3 更新

    判断网页页面是否关闭或刷新的方法:
    主要是针对网页版的页面,判断触发onbeforeunload事件的时候 :
    1. 鼠标是否点击了关闭按钮;
    2. 是否按了ALT+F4;
    这两种方式来关闭网页,如果是,则认为系统是关闭网页,否则在认为系统是刷新网页。

    window.onbeforeunload = function () {
      alert ("===οnbefοreunlοad===");
      if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
        alert ("你关闭了浏览器");
      } else {
        alert ("你正在刷新页面");
      }
    }
    
    展开全文
  • 主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验。可以看个例子: 这...
           在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验。可以看个例子:

           这是优化前的页面加载状态:执行npm run build打包项目,出来的vendeor.js文件,基本都是1M以上的的巨大文件,没有用户能忍受5s以上的loading而不关闭页面的,如图所示:

    0045ce1c11d65021619d7c4222696cb8.png

           当项目在挂载到服务器上,平均都是10S以上加载出来,好家伙这加载时间,仿佛过了半个世纪,很烦人,心态boom, 开发者甚至都有种想砸电脑的冲动(·#*@#¥……&*)!

    我们先来分析下前端加载速度慢原因

    1. 首先安装webpack的可视化资源分析工具,命令行执行:

    复制代码

    2. 然后在webpack的dev开发模式配置中,引入插件,代码如下:

    'webpack-bundle-plugin').BundleAnalyzerPlugin

    3. 最后命令行执行npm run build --report , 浏览器会自动打开分析结果,如下所示:

    fbb00a20af933b8186b9a30d0f6dfc7f.png

           可以看到vue全家桶相关依赖占用了很大的空间,对webpack的构建速度和网站加载速度都会有比较大的影响。单页应用会随着项目越大,导致首屏加载速度很慢,针对目前所暴露出来的问题,有以下几种优化方案可以参考:

    有针对性的优化方案

    一、对于第三方js库的优化,分离打包

           生产环境是内网的话,就把资源放内网,通过静态文件引入,会比node_modules和外网CDN的打包加载快很多。如果有外网的话,可以通过CDN方式引入,因为不用占用访问外网的带宽,不仅可以为您节省流量,还能通过CDN加速,获得更快的访问速度。但是要注意下,如果你引用的CDN 资源存在于第三方服务器,在安全性上并不完全可控。

            目前采用引入依赖包生产环境的js文件方式加载,直接通过window可以访问暴露出的全局变量,不必通过import引入,Vue.use去注册

            在webpack的dev开发配置文件中, 加入如下参数,可以分离打包第三方资源包,key为依赖包名称,value是源码抛出来的全局变量。如下图所示,可以看到打包后vue相关资源包已经排除在外了。对于一些其他的工具库,尽量采用按需引入的方式。

    externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    axios: 'axios',
    'element-ui': 'ELEMENT'
    }复制代码

    40679c2981d986097aebd52f82a50cba.png

    二、vue-router使用懒加载

           在访问到当前页面才会加载相关的资源,异步方式分模块加载文件,默认的文件名是随机的id。如果在output中配置了chunkFilename,可以在component中添加WebpackChunkName,是为了方便调试,在页面加载时候,会显示加载的对应文件名+hash值,如下图:

    {
    path: '/Login',
    name: 'Login',
    component: () = >import( /* webpackChunkName: "Login" */ '@/view/Login')
    }复制代码

    bb5cfb652d881ef62ee1bf9e6c4beee3.png

    三、图片资源的压缩,icon资源使用雪碧图

         严格说来这一步不算在编码技术范围内,但是却对页面的加载速度影响很大。对于所有的图片文件,都可以在一个叫tinypng的网站上去压缩一下。网址:tinypng.com/,对页面上使用到的icon,可以使用在线字体图标,或者雪碧图,将众多小图标合并到同一张图上,用以减轻http请求压力。然后通过操作CSS的background属性,控制背景的位置以及大小,来展示需要的部分。

    四、开启gizp压缩

           gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。前端配置gzip压缩,并且服务端使用nginx开启gzip,用来减小网络传输的流量大小。

    命令行执行:npm i compression-webpack-plugin -D

    在webpack的dev开发配置文件中加入如下代码:

    'compression-webpack-plugin')

          启用gzip压缩打包之后,会变成下面这样,自动生成gz包。目前大部分主流浏览器客户端都是支持gzip的,就算小部分非主流浏览器不支持也不用担心,不支持gzip格式文件的会默认访问源文件的,所以不要配置清除源文件。

    d139ae55b6992d2feb17ceef2dadbec6.png

           配置好之后,打开浏览器访问线上,F12查看控制台,如果该文件资源的响应头里显示有Content-Encoding: gzip,表示浏览器支持并且启用了Gzip压缩的资源

    8b96de740c15ea12ac87f79cf0dae9d3.png

    五、webpack相关配置优化

    (1)使用uglifyjs-webpack-plugin插件代替webpack自带UglifyJsPlugin插件来压缩JS文件;生产环境关闭源码映射,一方面能减少代码包的大小,另一方面也有利于系统代码安全;清除打印日志和debugger信息;配置SplitChunks 抽取公有代码,提升你的应用的性能

    (2)使用mini-xss-extract-plugin提取CSS 到单独的文件, 并使用optimize-css-assets-webpack-plugin来压缩CSS文件 。

    注:具体相关webpack配置请点击juejin.im/post/5d2070…查看第一篇webpack文章,注释很详细哟。

    六、前端页面代码层面的优化

    (1)合理使用v-if和v-show

    (2)合理使用watch和computed

    (3)使用v-for必须添加key, 最好为唯一id, 避免使用index, 且在同一个标签上,v-for不要和v-if同时使用

    (4)定时器的销毁。可以在beforeDestroy()生命周期内执行销毁事件;也可以使用$once这个事件侦听器,在定义定时器事件的位置来清除定时器。详细见vue官网

          最终优化后的效果如下图:vendor.js文件从1M以上优化到256K左右,体积减少接近80%,排除服务器影响的因素,界面渲染速度基本都在1s左右,达到秒开效果,比之前快

    了太多,体验一下就上来了嘻嘻。

    57c36e7eed1da7634a7390398d85a483.png

           结语:前端性能优化至关重要,以后有遇到更好的其他方案会继续补充进来。你也可以在评论区留言探讨,有错误不足的地方欢迎大佬指出。

    展开全文
  • Vue中监听窗口关闭事件,并在窗口关闭前发送请求

    万次阅读 多人点赞 2019-05-27 14:48:56
    网上很多博客说监听窗口关闭事件使用window.beforeunload,但是这个监听事件也会在页面刷新的时候执行,经过百度和自己的实际测试,终于解决了这个问题,代码如下: mounted() { window.addEventListener('...

    网上很多博客说监听窗口关闭事件使用window.beforeunload,但是这个监听事件也会在页面刷新的时候执行,经过百度和自己的实际测试,终于解决了这个问题,代码如下:

    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))
        },
        methods: {
          beforeunloadHandler(){
            this._beforeUnload_time=new Date().getTime();
          },
          unloadHandler(e){
            this._gap_time=new Date().getTime()-this._beforeUnload_time;
            debugger
            //判断是窗口关闭还是刷新
            if(this._gap_time<=5){
              //如果是登录状态,关闭窗口前,移除用户
              if(!this.showLoginButton){
                $.ajax({
                  url: '/pictureweb/user/remove',
                  type: 'get',
                  async:false, //或false,是否异步
                 
                })
              }
            }
          },
    }

    window.beforeunload事件在window.unload事件之前执行。同时注意ajax请求方式必须为同步请求,所以不能使用axios,因为axios不能执行同步请求。

    分享一些技术学习视频资料:https://pan.baidu.com/s/13dbR69NLIEyP1tQyRTl4xw

    展开全文
  • 使用vue监控浏览器窗口关闭操作

    千次阅读 2020-11-20 17:52:32
    因为项目中需求,浏览器关闭时进行一些操作处理 先是在网上查了一下,然后根据网上大佬博客然后自己修改之后最终测试成功! 下面是代码: <template> <div></div> </template> <...

     因为项目中需求,浏览器关闭时进行一些操作处理

    先是在网上查了一下,然后根据网上大佬博客然后自己修改之后最终测试成功!
    下面是代码:

    <template>
      <div></div>
    </template>

     

    <script>
    export default {
      data () {
        return {
          beforeUnloadTime: '',
          gapTime: ''
        }
      },
      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))
      },
      methods: {
        beforeunloadHandler(){
          this.beforeUnloadTime=new Date().getTime();
        },
        unloadHandler(e){
          this.gapTime=new Date().getTime()-this.beforeUnloadTime;
          //判断是窗口关闭还是刷新
          if(this.gapTime<=5){//浏览器关闭
          //自己的操作行为
         
          }
        }
      }
    }
    </script>

     

    展开全文
  • vue拖拽窗口

    2021-06-24 16:29:08
    vue拖拽窗口简单实现 效果 实现代码 <template> <transition> <!-- 绑定style中top和left--> <div class="moveBox" :style="position" v-show="show"> <div class="moveHead" @...
  • 在父窗口中打开子窗口,在子窗口中执行完操作后关闭窗口并且刷新父窗口的页面 一开始通过sessionstorage实现,在父窗口对子窗口进行监听,发现怎么也实现不了 后来,通过查询sessionstorage的生命周期只在当前...
  • vue+Electron,自定义最大化、最小化、关闭窗口的功能

    千次阅读 热门讨论 2020-05-21 09:08:49
    } } </style> 图标 效果如下(此时已具备最小化、最大化、恢复以及关闭当前窗口的功能): 二、使用ipcRenderer 和 ipcMain模块发送消息,让主进程、渲染进程通信; 在渲染进程给主进程发消息,通知主进程我要...
  • 需求场景一:用户退出时清空localStorage并告知后台用户退出,保持登录状态时关闭窗口或者浏览器达到相同目的 实现: // 在mounted中触发beforeunload事件以及在destroyed中触发beforeunload事件 // 当文档或一个...
  • vue监听浏览器窗口关闭

    千次阅读 2020-09-11 17:34:15
    vue监听浏览器窗口关闭 需求:后端需要在用户退出或者关闭页面的时候调用一个接口 相关技术点: 页面关闭和刷新时, 触发 beforeunload事件 当文档或一个子资源正在被卸载时, 触发 unload事件,unload在beforeunload...
  • 区分窗口关闭和刷新事件 火狐浏览器兼容 关闭发请求,退出登陆操作(使用原生发同步请求,使用axios发异步会出现时行时不行问题) <template> <div id="app"> <router-view /> </...
  • 作者:HelloGitHub-追梦人物追梦人物的 Vue 系列教程在他的博客已经全部更新完成,地址: https://www.zmrenwu.com/courses/vue2x-todo-tutorial/注意:追梦的博客在国外所以访问速度慢,需要耐心等待一下。...
  • 关注关注前端潮咖,每日精选好文作者:谁动了我的橘子来源:https://juejin.im/post/5edf5b22e51d4578975a7024在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后...
  • 因为在项目中实现在线播放视频时,当用户直接关闭浏览器窗口,需要记录用户观看视频的进度所以用到监听窗口关闭事件。先是在网上查了一下,然后根据网上大佬博客然后自己修改之后最终测试成功! 下面是代码: <...
  • 如果是用vue做的单页面程序的时候,将监听的方法放在App.vue是最灵活的 &lt;template&gt; &lt;div id="main" class="app-main"&gt; &lt;router-view&gt;&lt;/...
  • vue 关闭浏览器弹出评价窗口

    千次阅读 2018-09-26 17:00:11
    这个是打开的一个新窗口,然后点击X需要弹...event.returnValue=“请确定是否关闭或刷新当前页面?”; } 就可以了。我写了不好使在vue中还是比较脑壳壳疼的问题,希望有大神可以帮忙解决一下。微信:lyh2818279706 ...
  • $("body").on("click", function(e) { // setTimeout(function() { // console.log(e.target); e.preventDefault(); // console.log(e.target); // 触发该事件的直接元素 var type = e....
  • mounted () { ... window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) ... // 非窗口关闭的跳转直接卸掉监听 window.removeEventListener('beforeunload', e => this.b...
  • 我在做项目的时候,有一个需求,在离开(跳转或者关闭)购物车页面或者刷新购物车页面的时候向服务器提交一次购物车商品数量的变化。 将提交的一步操作放到 beforeDestroy 钩子函数中。 beforeDestroy() { console....
  • BrowserWindow -即 此网页所属的窗口,它和主进程的win 相同,即主进程中的 new BrowserWindow ( {....} ) header.vue文件: 图标 效果如下(此时已具备最小化、最大化、恢复以及关闭当前窗口的功能): 二、使用...
  • vue 判断窗口关闭还是刷新 笔记

    千次阅读 热门讨论 2019-05-22 16:56:59
    3.当浏览器窗口刷新时不做任何操作,如果关闭浏览器则要清空登录信息 一: 首先把登录信息缓存在本地,通过localStorage 不用sessionStorage,因为sessionStorage缓存的数据在通过浏览器地址栏输入地址打开新...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,771
精华内容 3,908
关键字:

vue关闭窗口

vue 订阅