首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

关闭浏览器触发监听器,向后端发送请求

关闭浏览器触发监听器,向后端发送请求 1、需求前提 项目使用Vue + SpringBoot搭建的前后端分离项目,后端存储用户登录信息和Token。...现在的需求是,多端只可以有一个用户登录,当一个用户关闭浏览器或者关闭标签页时,向后端发送请求删除该用户的登录信息,以此来解决用户及时下线的目的。...'; } return '关闭提示'; }, // 关闭浏览器标签触发 logout() { fetch('/login/loginOut?...点击取消按钮时不会触发第二个监听器,点击离开按钮时,则会触发下面的监听器。 重点2: // 关闭浏览器标签触发 logout() { fetch('/login/loginOut?...4、最后 到这里前端基本就写完了,只要关闭浏览器或者关闭标签页,则会触发这个监听器并发送请求到后端,只要后端收到了这个请求,则证明fetch请求是没有问题。

1.5K10
您找到你想要的搜索结果了吗?
是的
没有找到

【兼容性】监听页面关闭发送请求

这个是前端兼容性系列内容 因为前端监控会在页面关闭的时候,发送一下日志,所以会涉及到监听页面关闭,之前我们只监听了一个beforeunload 来发送数据 但是我看了之后发现应该没有这么简单实现,前端总要写一些乱七八糟的兼容代码的啊...1、页面刷新 2、跳转页面 3、关闭tab 4、关闭浏览器 所以如果我要监听页面关闭,那么我必须要都兼容这些动作。...我是怎么做这些动作的,关闭tab ,pc 的不用说了吧 移动端就是打开浏览器的窗口界面,然后关闭 关闭浏览器则是在任务管理界面,把 app 划出 页面关闭事件 页面关闭有哪些事件,我直接列出来 1、beforeunload...而 iOS 在把浏览器切后台的时候,可以触发 visibilitychange ,所以可以算是解决掉 关闭浏览器的问题 至于关闭 tab,我调查大概四五个人,很少有关闭tab 的习惯,所以也不算是什么大问题...兼容做法 所以现在如果我们要监听页面关闭,那么我们最好监听四种事件,这样可以最大程度兼容 使用一个变量去判定是否已经执行过 页面关闭相关的处理逻辑 只要执行就行,谁执行没有关系,大家排好队 let

4.3K50

document.visibilityState 监听浏览器最小化,tab标签栏之间的切换状态

本文为joshua317原创文章,转载请注明:转载自joshua317博客 https://www.joshua317.com/article/52 document.visibilityState 监听浏览器最小化...页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 (注意,页面被其他软件遮盖并不算隐藏,比如打开的 sublime 遮住了浏览器)。...document.visibilityState:表示下面 4 个可能状态的值 hidden:页面在后台标签页中或者浏览器最小化 visible:页面在前台标签页中 prerender:页面在屏幕外执行预渲染处理...页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 (注意,页面被其他软件遮盖并不算隐藏,比如打开的 sublime 遮住了浏览器)。...document.visibilityState:表示下面 4 个可能状态的值 hidden:页面在后台标签页中或者浏览器最小化 visible:页面在前台标签页中 prerender:页面在屏幕外执行预渲染处理

1.4K20

Flux 如何监听镜像标签更新实现 GitOps

对于容器镜像,可以将 Flux 配置为: 扫描镜像仓库并获取镜像标签 根据定义的策略(semver、calver、regex)选择最新的标签 替换 Kubernetes 清单中的标签(YAML 格式)...Flux Git 到集群调谐) 示例 比如这里的示例使用的镜像地址为 cnych/devops-demo,我们可以先创建一个 ImageRepository 来告诉 Flux 扫描哪个镜像仓库以查找新标签...TAGS k8s-demo 2023-09-24T03:11:05Z 21 可以看到 ImageRepository 对象已经创建成功了,并且扫描到了 21 个镜像标签...semver 版本范围的标签,则开源创建一个 ImagePolicy 对象。...,然后 ImagePolicy 对象会过滤到最新的镜像标签,最后通过 ImageUpdateAutomation 对象会自动将镜像标签更新到 Git 代码仓库中的 Values 文件中,然后 Flux

37540

javascript如何监听页面刷新和页面关闭事件

在我们的日常生活中,时常遇到这么一种情况,当我们在点击一个链接、关闭页面、表单提交时等情况,会提示我们是否确认该操作等信息。...相同点: 两者都是在对页面的关闭或刷新事件作个操作。 不同点: unbeforeunload()事件执行的顺序在onunload()事件之前发生。...onunload()事件是无法阻止页面关闭的。...浏览器的兼容 onunload: IE6,IE7,IE8 中 刷新页面、关闭浏览器之后、页面跳转之后都会执行; IE9 刷新页面 会执行,页面跳转、关闭浏览器不能执行; firefox(包括firefox3.6...) 关闭标签之后、页面跳转之后、刷新页面之后能执行,但关闭浏览器不能执行; Safari 刷新页面、页面跳转之后会执行,但关闭浏览器不能执行; Opera、Chrome 任何情况都不执行。

11.6K30

IE浏览器,被永久关闭

IE浏览器正式退役! IE浏览器,最高市场份额曾一度高达95%。在很多用户潜意识中,其以字母“e”为核心的Logo,已成浏览器的代名词。...1995年8月16日,Windows第一个默认浏览器——Internet Explorer(IE)首次亮相,由于和Windows的捆绑安装,IE浏览器迅速占领市场。...根据StatCounter数据显示,2022年5月,IE浏览器的市场占比率已经只剩下0.64%了。 可能在大多数人的记忆里,登录一些必须要使用IE浏览器才能启动的老旧的网页和服务。...IE浏览器“退休” 对用户有何影响 目前还是有某些古董网站,还真只能IE浏览器打开,即使IE兼容模式也不行,比如一些银行U盾、考试报名之类的。 IE浏览器退役后,其功能将由Edge浏览器接棒。...在IE浏览器正式退休之后的几个月时间里,IE 桌面应用程序将会先被重定向到微软Edge浏览器。 最终微软将通过后续的Windows更新永久禁用IE。

2K10

浏览器标签通信

写在前面 今天说一下跨标签通信的一种实现方式,首先跨标签指的是同一个浏览器中不同标签之间进行数据通信,也就是说比如在第一个标签写了一个数据,在另一个标签里面进行数据的使用,而且是实时的 先说现象...但是不是实时的,无法做到页面不刷新就更新数据的目的 实现方案之一:BroadcastChannel MDN-BroadcastChannel 他的实现过程是很简单的,通过一个实例发送一条广播出去,这个时候浏览器可以通过监听消息的方式进行获取对应的实例的消息内容...,如果不想监听了,就直接调用他自己的方法进行关闭即可 代码实现 // TODO: 创建一个BroadcastChannel的实例 const BC = new BroadcastChannel('tagCommunication-channel...') /** * TODO: 发送消息给所有的监听标签页 * @param {any} 广播消息的内容 */ const sendMessages = (obj = {}) => { console.log...let pageDom = document.getElementById('msg') pageDom.innerText = data.name // TODO: 接收结束 关闭广播

19010
领券