精华内容
下载资源
问答
  • 出现问题:页面中有退出按钮发送close请求,但用户如果直接关闭浏览器,如何发送请求?请看: main.vue mounted() { window.addEventListener("beforeunload", () => this.beforeunloadHandler()); wind

    目标功能:这是一个路由器项目,用户访问路由器时只能在一台设备上登陆,如果要尝试登陆多台设备后端会返回“IP被占用”的相关提示。因此在用户访问结束后必须发送close请求,下一次才能正常登陆。

    出现问题:页面中有退出按钮发送close请求,但用户如果直接关闭浏览器,如何发送请求?请看:

    main.vue
      mounted() {
        window.addEventListener("beforeunload", () => this.beforeunloadHandler());
        window.addEventListener("unload", () => this.unloadHandler());
      },
      beforeDestroy() {
      	// 假如你需要在销毁之前去做一些操作,可以在这里进行,比如:
        clearTimeout(this.NItimeout);
        clearTimeout(this.timeout);
      },
      destroyed() {
        window.removeEventListener("beforeunload", () => this.beforeunloadHandler());
        window.removeEventListener("unload", () => this.unloadHandler());
      },
      methods: {
        beforeunloadHandler() {
          this.beforeUnloadTime = new Date().getTime();
        },x
        async unloadHandler() {
          this.gapTime = new Date().getTime() - this.beforeUnloadTime;
          if (this.gapTime <= 5) { //判断是窗口关闭还是刷新,小于5代表关闭,否则就是刷新。
          	// 重要提示:此处的的请求一定是要同步的,axios在此处不可用,已经踩过坑了。直接使用原生js发请求。
          	// 根据你的实际情况写请求地址,为了防止跨域此处使用了拼串,请你根据你的情况自定义。
            let url = window.location.origin + "/cgi-bin/qcmap_auth"; 
            // 新建一个请求。
            var xhr = new XMLHttpRequest();
            // 参数1:请求方式,参数2:请求地址,参数3:false代表同步,true代表异步,一定要写false同步
            xhr.open("post", url, false);
            // 设置请求头
            xhr.setRequestHeader(
              "Content-Type",
              "application/x-www-form-urlencoded;charset=UTF-8"
            );
            // 请求发送的数据,数据太多可以放在变量中。请你根据你的情况自定义
            xhr.send("id=111&type=close");
          }
        }
      }
    

    还是有问题:在电脑浏览器中是没问题,但在移动端的浏览器中此方式无法生效(这是测试人员和我说的,我没亲测),为了尽快解决问题,我最终改用了其他方式,
    其他方式:在通过IP地址访问web端时先发送close请求,这样的好处就是可以顶掉用户在其他设备上的登陆,用最近的设备进行登陆。
    求助:还是希望有小伙伴能解决移动端浏览器关闭前发请求的问题,可以在我下方留言,我们共同来把这个功能完善。比心~~

    展开全文
  • 主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 需求:叉掉浏览器窗口,弹出提示,确认后才会关闭窗口 mounted() { window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) }, methods: { beforeunloadHandler(e) { this._...

    需求:叉掉浏览器窗口,弹出提示,确认后才会关闭窗口
    在这里插入图片描述

    mounted() {
        window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
    },
    
     methods: {
        beforeunloadHandler(e) {
          this._beforeUnload_time = new Date().getTime()
          e = e || window.event
          if (e) {
            e.returnValue = '关闭提示'
          }
          return '关闭提示'
        },
    }
    

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

    参考MDN关于beforeunload事件说明:Window: beforeunload event

    展开全文
  • vue 浏览器关闭提醒

    2021-07-05 17:57:59
    -- * @Description: * @Author: 李大玄 * @Date: 2021-07-05 09:58:21 * @FilePath: /vue-shelf/src/views/test/close.vue --> <template> <div class="close hmax"> 11 <el-button>aasdasd</el-button> </div> ...

    我很遗憾没有体会过被人坚定选择的感觉,但是我能体会到的是被人坚定不移的选择离开

    前端QQ群: 981668406
    在此附上我的QQ: 2489757828 有问题的话可以一同探讨
    我的github: 李大玄
    我的私人博客: 李大玄
    我的npm开源库: 李大玄
    我的简书: 李大玄
    我的CSDN: 李大玄
    我的掘金: 李大玄
    哔哩哔哩: 李大玄

    <!--
     * @Description: 
     * @Author: 李大玄
     * @Date: 2021-07-05 09:58:21
     * @FilePath: /vue-shelf/src/views/test/close.vue
    -->
    <template>
      <div class="close hmax">
        11
        <el-button>aasdasd</el-button>
      </div>
    </template>
    
    <script>
    //例如:import 《组件名称》 from '《组件路径》';
    
    export default {
      name: '', // Pascal命名
      mixins: [],
      //import引入的组件需要注入到对象中才能使用
      components: {},
      props: {},
      //这里存放数据
      data() {
        return {};
      },
      //监听属性 类似于data概念
      computed: {},
      //监控data中的数据变化
      watch: {},
      //生命周期 - 创建完成(可以访问当前this实例)
      beforeCreate() {}, //生命周期 - 创建之前
      created() {},
      //生命周期 - 挂载完成(可以访问DOM元素)
      beforeMount() {}, //生命周期 - 挂载之前
      mounted() {
        window.addEventListener('beforeunload', (e) => this.beforeunloadHandler(e));
        window.addEventListener('unload', (e) => this.unloadHandler(e));
      },
      //方法集合
      methods: {
        beforeunloadHandler(event) {
          // debugger
          this._beforeUnload_time = new Date().getTime();
          console.log('this._beforeUnload_time:', this._beforeUnload_time);
          event = event || window.event;
          if (event) {
            event.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);
          // 判断是窗口关闭还是刷新
          // debugger; // 关闭能拦住 刷新拦不住
          // todo
          if (this._gap_time <= 5) {
            // debugger;
            // todo
            $.ajax({});
          } else {
            $.ajax({}); // 关闭
            // debugger;
          }
        },
      },
      beforeUpdate() {}, //生命周期 - 更新之前
      updated() {}, //生命周期 - 更新之后
      beforeDestroy() {
        window.removeEventListener('beforeunload', (e) => this.beforeunloadHandler(e));
        window.removeEventListener('unload', (e) => this.unloadHandler(e));
      }, //生命周期 - 销毁之前
      destroyed() {}, //生命周期 - 销毁完成
      activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
    };
    </script>
    <style lang='scss' scoped>
    //@import url(); 引入公共css类
    .close {
      background: pink;
    }
    </style>
    
    展开全文
  • vue 关闭浏览器弹出评价窗口

    千次阅读 2018-09-26 17:00:11
    window.onbeforeunload=function(){ event.returnValue=“请确定是否关闭或刷新当前页面?”; } 就可以了。我写了不好使在vue中还是比较脑壳壳疼的问题,希望有大神可以帮忙解决一下。微信:lyh2818279706 ...

    在这里插入图片描述这个是打开的一个新窗口,然后点击X需要弹出评价的这个(这个评价不是组件),我在网上看了说是:
    window.οnbefοreunlοad=function(){
    event.returnValue=“请确定是否关闭或刷新当前页面?”;
    }
    就可以了。我写了不好使在vue中还是比较脑壳壳疼的问题,希望有大神可以帮忙解决一下。微信:lyh2818279706

    展开全文
  • vue浏览器消息提示

    2021-12-23 15:24:37
    vue浏览器消息提示 判断浏览器是否支持浏览器消息弹窗 suportNotify() { if (window.Notification) { // 支持 console.log("支持" + "Web Notifications API"); //如果支持Web Notifications API,再判断浏览器...
  • 注意:区分不了浏览器是触发了刷新还是关闭,而且提示的弹框是无法自定义的;如果有大佬有方法能区分,还请评论学习一下!感谢! 代码可直接复制: <template> <div /> </template> <script...
  • vue监听浏览器刷新和关闭事件,并在页面关闭/刷新发送请求1.需求背景:2.需求分析:3.实现方式:4.实现方式解析:1)浏览器页面事件基础2)在mounted监听beforeunload和unload事件5.存在的问题/风险点:1)为了...
  • vue监听浏览器窗口关闭

    千次阅读 2020-09-11 17:34:15
    vue监听浏览器窗口关闭 需求:后端需要在用户退出或者关闭页面的时候调用一个接口 相关技术点: 页面关闭和刷新时, 触发 beforeunload事件 当文档或一个子资源正在被卸载时, 触发 unload事件,unload在beforeunload...
  • 需求场景一:用户退出时清空localStorage并告知后台用户退出,保持登录状态时关闭窗口或者浏览器达到相同目的 实现: // 在mounted中触发beforeunload事件以及在destroyed中触发beforeunload事件 // 当文档或一个...
  • 今天小编就为大家分享一篇默认浏览器设置及vue自动打开页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • window.onload事件 设置页面加载时执行的动作,即进入页面的时候执行的动作。 window.onunload 已经从服务器上读到了需要加载的新的页面...onunload和onbeforeunload都是在页面刷新和关闭前的动作,但是onbeforeunl..
  • vue监听浏览器

    2019-03-28 17:39:04
    需求: 在浏览器打开一个页面当返回或关闭的时候 弹出提示框 1、挂载完成后,判断浏览器是否支持popstate mounted(){ if (window.history && window.history.pushState) { history.pushState(null, null...
  • vue监听浏览器的后退和刷新事件 浏览器的后退事件 浏览器的后退按钮,默认是返回上一个路径的页面,可是如果我们当前的页面有数据没有被保存的话,点击后退按钮应该加一层判断,也是提示用户是否需要去保存页面的...
  • 在alert弹窗内添加callback,当用户点击确定或者关闭时,将关闭浏览器页面 this.$alert('当前页面已过期,请重新从门户页打开', '提示', { ... //关闭浏览器 window.open('','_self').close() } ...
  • mounted(){ window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) }, destroyed () { window....') e = e || window.event if (e) { e.returnValue = '关闭提示' } return '关闭提示' } }
  • vue 监听浏览器刷新

    万次阅读 2018-12-05 02:31:00
    1.在mounted中加入如下代码 ...'关闭提示' } return '关闭提示' } 复制代码 3. 最后销毁 destroyed () { window.removeEventListener( 'beforeunload' , e => this.beforeunloadHandler(e)) }, 复制代码
  • 但是发现点击浏览器的后退按钮,会出现弹窗闪现一下,立刻消失,页面路由改变了,页面确没有变化。 解决方案 增加一个setTimeout延时 if (from.name === 'index') { setTimeout(() => { this.$confirm('您...
  • vue 监听浏览器关闭事件 用vue做的项目,有个需求就是关闭浏览器的时候,需要往后台提交有个接口,来监听这个账号有没有下线。 第一步 data里放好要用到的变量 //声明遍历 data() { return { _beforeUnload_time:'...
  • 登录完成后vue路由跳转到主页,这时候浏览器提示“是否记住密码”,我选“否”;然后我点菜单跳转到另一个路由,结果浏览器再次提示“是否记住密码”,我再次选“否”;我接着又一次点菜单跳转到另一个路由,浏览器...
  • https://blog.csdn.net/qq_39517820/article/details/83446877 转载于:https://www.cnblogs.com/taochengyong/p/10978817.html
  • e.returnValue = '关闭提示'; } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ return '关闭提示'; }; 2、在生命周期钩子中注册监听事件 methods: { beforeunloadHandler (e) { // ... } } 在 mounted
  • 我是使用vue-easy-print插件来实现模太框内的打印。模太框的代码如下::visible.sync="printvisible":title="print_params.title":width="print_params.width":modal="print_params.modal"center:close-on-click-...
  • 浏览器的自动填充密码功能关闭,如果关闭不了,可参考 方案: 1、安装加解密插件,并在login.vue中引用: 安装: npm install crypto-js login.vue引用: import CryptoJS from "crypto-js"; 2、html部分: <...
  • 监听浏览器关闭事件的解决方案

    千次阅读 2020-12-21 11:06:37
    在web项目开发中,关于浏览器关闭事件有两个很常见的问题:为什么我没有监听浏览器关闭事件? 我监听到了这个事件,但写在事件里的异步请求为什么发送不成功?原因分析:这两个问题无外乎两个原因:浏览器关闭事件未...
  • vue.js代码,安卓手机和ios,在微信浏览器点击返回按钮或手机自带的返回,都会直接关闭微信浏览器,返回到公众号主体 const pushHistory = () => {  let state = {  title: 'myCenter',  url: '__SELF__'  }  ...
  • 第二种方法是在运营人员刷新或回退时,强提示运营人员有修改的数据尚未保存,询问是否继续。 无认采用哪一种方式,在技术实现上,我们需要首先能够监听到用户执行回退或刷新页面的动作。 实际上,当用户执行页面刷新...
  • vue拦截(阻止)浏览器后退事件

    千次阅读 2020-12-21 13:21:00
    然后,使用vue的 beforeRouteLeave 路由守卫可以对一些路由操作进行跳转前提示,但是如果用户点了浏览器的后退按钮,那这个路由守卫基本没用了啊,那个弹窗就闪了一下就消失了,路由直接改变,但是页面不刷新(写这篇...
  • ```vue + element 怎么关闭谷歌浏览器账号密码提示?![图片说明](https://img-ask.csdn.net/upload/202001/03/1578017750_777717.png) *********************************************************************...

空空如也

空空如也

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

vue关闭浏览器前提示

vue 订阅