如何在浏览器关闭之前处理一些逻辑

最新推荐文章于 2024-04-28 13:46:58 发布
最新推荐文章于 2024-04-28 13:46:58 发布
阅读量1.4k 收藏 1
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45644355/article/details/123403846
版权

vue项目中，需要在浏览器关闭之前调一个后端接口
解决方案：在main.js文件中写下以下代码：

window.onbeforeunload = function (e) {
	navigator.sendBeacon('url',data) //url为接口地址，接口地址中无需带域名和端口号，data 参数是将要发送的 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据，如果没有，可以写一个空字符串
}

因为浏览器关闭后，前端无法在控制台看到是否成功调取了接口，此时可以利用抓包工具wireshark看到是否调取了接口，安装好后，在地址栏输入想要抓包的地址，就可以在页面上看到调取了的接口请求，在某个接口上右键点击追踪流-HTTP流，可以看到接口是否请求成功

Yriaf@2022
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
MagicTools引擎+编辑器+场景浏览器
05-04
这次资源中增加了编辑器工程(MtEditor)，目前功能包括：打开场景、关闭场景、移动物体、摆放模型。 可以直接在编辑器中启动浏览器(MtViewer)来打开当前正在编辑的场景。 启动浏览器时可以选择使用d3d9或者是opengles来作为底层的渲染api。 下面引用之前提交过的引擎描述： MagicTools引擎，包括3d场景，材质，d3d与opengles两个渲染器，max导出插件，集成了cocos2d作为ui。 引擎架构如下： 1.MtFoundation：底层数学库、字符串处理、操作系统和编译器宏定义等底层封装库。这些功能放在了MtFoundation.dll中，这个库可以以后单独提取出来提供其他项目使用。 2.MtKernel：提供资源管理器、文件系统、场景树管理。所以资源均提供引用计数、加载卸载计数、资源可以按组进行预加载。同一资源可以属于多个资源组，资源组在做rpg游戏切换房间的时候比较有用，可将一个房间的资源列表做一个组进行加载，若已存在的资源会增加其加载计数，而不用重新加载。 3.MtSceneQuery：场景查询模块。场景查询是一个相对独立的模块，可以替换掉。主要做一些算法的工作，比如射线查询、视锥剔除。把它独立处理就是希望这些cpu计算工作可以与渲染分离，便于放到一个独立的线程中。 4.MtGraphic：3d引擎模块，提供网格定义、材质定义，骨骼动画和蒙皮、贴图资源、渲染设备封装等。此处对渲染设备功能做了抽象，将具体渲染调用放到了d3d9renderer和glesrenderer中去。这里的材质在d3d下直接使用d3dxeffect，并使用宏控制编译。gles下使用固定管线控制。 d3d环境下定义了自己的材质和材质模板格式，材质模板主要用于定义effect中可用的宏，这些宏的可选取值，effect代码本身等。材质文件则引用材质模板文件，并定义宏的取值，还有uniform参数值。图形模块提供effect的uniform参数与场景中光源和物体本身材质参数的绑定。 gles环境下定了一个简单的脚本，控制固定功能渲染中的diffuse、specular和第一层纹理的参数 自定义了模型网格、骨骼、动画、材质、渲染实体等文件格式，这些文件格式说明放在了fileformats目录下。 渲染实体（Model）定义了网格与材质的组合关系，目前一个子网格只能有一个材质，但能扩展成一个子网格绑定多个材质。这样可以方便制作材质的过渡效果。 5.MtGraphic2d：这个模块是将cocos2dx0.99.4的底层替换成自己封装的渲染器实现的。cocos2dx原本是使用opengles1.0作为渲染api，在windows系统下使用powervr的模拟器运行。现在可以在d3d下或是opengles下运行。并将其更新流程合并到MtGraphic中，使得cocos2d可以正常的渲染在3d场景的前方。cocos2d的大部分功能已测试完成。可以在d3d下正常运行。 6.MtEngine：对上面几个模块的统一封装，这里负责动态的加载上面的几个模块，这里可以选择使用d3d还是gles进行渲染。还提供了建议场景逻辑控制，支持加载一个xml定义的场景脚本文件。直接使用EgnObject(EngineObject的简写)对场景模型进行控制可以省去操作底层场景树和模型材质创建的流程。 7.sampler：测试项目，用于测试上述功能。加载一个xml场景（里面全是茶壶。。。等编辑器出来就可以摆场景了），cocos2d界面渲染。鼠标键盘的输入控制。（wasd控制移动、鼠标控制方向） 材质文件说明： efm（effect material）：d3d专用，里面会引用mtpl（material template）文件。 mtpl:材质模板文件，里面定义可选的宏和可选取值，还有d3dxeffect的代码。 ffm(fixed function material)：d3d和gles通用，固定渲染管线材质。gles下只能用这个。 工程里带的导出插件目前只能导出网格，材质需要自己动手配置.(材质的编辑打算放到编辑器里做，然后在编辑器中绑定网格和材质，这也是cryengine和《古域》的做法，这样可以保证编辑的材质和游戏最终运行时的效果一样。)编译max导出插件需要max2010的sdk，安装插件后就可以导出单个模型。一次导出一个模型，做好一个mesh后选择max的export菜单，然后选择导出成“MtEngine Mesh File”（*.mmesh）就可以。
vue添加keep-alive缓存后,不能调用销毁(destroyed)事件,刷新或者关闭浏览器事件监听后调用接口(我这里是因为录像异常需要结束录像)
qq_62452129的博客
09-02 790
录像我使用的是webetc(延迟很低,换了很多种这种延迟最低),因为加了缓存后只能调用activated和deactivated,在这里就不再解释这俩生命周期是干什么用的了,因为关闭浏览器和刷新浏览器是同步事件,而调用接口是异步事件,在这里请求接口我使用的是axios,在执行完同步事件的时候,浏览器已经刷新了,并不会去调用异步操作,所以只能使用原生的获取事件。xhr.open('GET', '接口地址',true);// 这里必须是true,并且不可以删除 因为默认是false。// 切换录像已经结束。
【解决方案】监听浏览器关闭事件并进行前后端交互
前端成长之路
03-09 605
2.第二点，可以通过performance.getEntriesByType(‘navigation’)[0].type === 'reload’判断页面进入类型是否为刷新来解决。1.第一点，原因是因为chrom最新的浏览器策略导致，新版本浏览器已修改，页面不发生任何交互事件时，此事件不触发。开发过程中碰到个需求，需要在浏览器关闭的时候调用一个接口，告诉后端页面关闭了，反复尝试后记录下解决过程。因为chrom的新特性，导致无法直接通过浏览器事件来判断，故需要新的解决方案。
浏览器关闭网站移除本地存储localStorage，用vue的destroyed或者beforeDestroy函数无效
weixin_45654407的博客
07-30 3426
关闭浏览器或者关闭网页窗口的时候，需要移除token 在 App.vue挂载的时候，加上这个方法，浏览器关闭动作的事件 mounted () { window.addEventListener('beforeunload', () => { localStorage.removeItem('token') localStorage.removeItem('user') }); }, ............... vue的生命钩子函数destroyed
vue 如何在浏览器关闭时调用退出登录接口
HuuXiaoTian的博客
08-16 1509
vue 如何在浏览器关闭时调用退出接口
vue 对浏览器关闭、刷新的监听
qq_35440907的博客
06-28 2221
vue 对浏览器关闭、刷新的监听
如何在浏览器页面关闭时发送 API 请求
weixin_54754781的博客
08-08 592
离开网页时，如何发送API请求将数据保存到我们的服务器上
Vue页面关闭时调用接口
weixin_44880056的博客
04-13 4865
mounted() { // 监听浏览器关闭 window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) window.addEventListener('unload', e => this.unloadHandler(e)) }, destroyed() { window.removeEventListener('before
实现关闭页面（浏览器）时请求接口Navigator.sendBeacon()
weixin_45744454的博客
07-05 1298
文档链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon 参数： url url 参数表明 data 将要被发送到的网络地址。data 可选 data 参数是将要发送的 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据。请求方式：默认为post请求...
在浏览器关闭的时候发送ajax请求
m0_62317155的博客
03-17 1246
在浏览器关闭的时候发送ajax请求
页面关闭时发起接口请求
niu995181673的博客
12-20 632
浏览器关闭页面时如何调用接口 1.使用Navigator sendBeacon进行请求 2. 使用fetch() 的 keep-alive:true 进行请求
工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究
02-28
SessionStorage 存储的数据只在会话期间有效，关闭浏览器则自动删除 Sqlite 一款轻型的数据库，是遵守ACID的关系型数据库管理系统，它包含在一个相对小的C库中 W3C 万维网联盟，创建于1994年，是Web技术领域最具权威...
ABAP中文幫助文檔
10-27
 选择屏幕版本(仅报表程序)：如果没有指定选择屏幕版本，则系统在逻辑数据库选择标准、报表特定参数及选择选项的基础上自动创建选择屏幕(关于选择屏幕的详细信息，参见《使用选择屏幕》)。如果想使用自己的选择...
三虎企业建站系统(3hooCMS) v3.0 SP2.rar
07-05
一年没有更新这个程序,一直在想写新版的V4,但是由于本人工作原因一直没有静心的时间下来写,这段离职后把原来的程序进行了彻底的改进,对一年以来累积的问题进行了整理和修正,包括一些细节与安全问题。 本程序承诺免费...
ASP.NET的网页代码模型及生命周期
07-28
ASP.NET让用户可以为从浏览器传递的事件在服务器代码中设置相应的处理程序。假设某个用户正在浏览网站并与页面之间产生了某种交互，用户的操作就会引发事件，事件通过HTTP被传输到服务器。在服务器中，ASP.NET框架...
【解决NodeJS项目无法在IDEA中调试的问题】使用JetBrains IDEA 2023 调试nodejs项目
宅斗士的博客
04-23 398
项目采用Ant Design Pro + React，使用前后端分离开发方式，后端可以很容易的打断点调试，但是前端用到了React脚手架，在IDEA中加了调试断点，但是没有什么用处。
SpringBoot项目打包分离高阶操作
Record Little
04-23 730
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
判断前端入参是否空否则提示前端写法
最新发布
qq_39306234的博客
04-28 163
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 474
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
vue中关闭浏览器之前操作
11-22
在Vue中，我们可以使用`beforeUnload`事件来实现在关闭浏览器之前执行特定操作的需求。该事件会在即将关闭页面之前触发，这给了我们机会来执行某些代码逻辑以确保数据的保存或其他操作。 要在Vue中使用`beforeUnload`事件，我们可以利用Vue的生命周期函数和`window`对象。具体步骤如下： 1. 在Vue组件中，可以使用`beforeDestroy`生命周期函数来监听浏览器关闭事件。当浏览器即将关闭时，该函数会被触发。 ```javascript beforeDestroy() { window.addEventListener("beforeunload", this.handleBeforeUnload); }, ``` 2. 在`beforeDestroy`函数中，我们可以编写`handleBeforeUnload`方法来处理浏览器关闭时要执行的操作，例如保存数据或发送请求等。 ```javascript methods: { handleBeforeUnload() { // 执行关闭前需要处理的操作 // 例如保存数据或发送请求等 } }, ``` 3. 要确保在Vue组件销毁之前移除事件监听器，我们可以使用`destroyed`生命周期函数。 ```javascript destroyed() { window.removeEventListener("beforeunload", this.handleBeforeUnload); } ``` 使用这种方法，我们可以在Vue中监听浏览器关闭事件，并在关闭之前执行我们需要的操作，以确保数据的保存或其他必要的处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值