美文网首页
判断浏览器刷新还是关闭并向后端发送数据navigator.sen

判断浏览器刷新还是关闭并向后端发送数据navigator.sen

作者: Neuro_annie | 来源:发表于2024-08-13 11:44 被阅读0次
语法:
navigator.sendBeacon(url);
navigator.sendBeacon(url, data);

参数:
url 
表明 data 将要被发送到的网络地址

data 可选 
是将要发送的 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据

如何测试:
可以同时打开两个窗口,观察刷新和关闭页面时localStorage值得变化

let begin = 0;
window.addEventListener("unload", () => {
  const differ = new Date().getTime() - begin;
  window.localStorage.setItem('unload', differ);
  if(differ <= 5) {  // 判断是刷新还是关闭
    const formData = new FormData();
    formData.append("rtspUrl", this.locationUrl);
    navigator.sendBeacon("/video/end_kd", formData);
  }
});
window.addEventListener("beforeunload",()=>{
  begin = new Date().getTime();
  window.localStorage.setItem('beforeunload', begin);
})
刷新页面-时间差为11 关闭页面-时间差为2

相关文章

  • Navigator.sendBeacon 无阻塞发送统计数据

    业务场景 当用户关闭浏览器、刷新浏览器或者跳转其他页面时,向服务器发送一些统计数据。 常规方案 1. 直接发送 x...

  • Ajax初探(上)

    Ajax是一种异步的前后端数据交互的技术,它可以在不刷新浏览器的情况下,向服务器端发送http请求和少量数据,服务...

  • 捕获窗口关闭、刷新事件

    参考 js实现关闭浏览器时提示用户是否保存信息用js判断页面刷新或关闭的方法(onbeforeunload与onu...

  • 常用的php代码

    后端php步骤 1.连接数据库2.接收前端发送过来的参数3.执行sql语句4.进行逻辑判断,返回结果5.关闭数据库...

  • vue+node实现批量删除

    页面前端采用elementUI框架实现批量勾选并向后端发送要删除的ids数组 后端进行接收,后端技术为node,数...

  • 18 js13 原生js升华1 小知识点

    1、浏览器基本组成:用户界面、浏览器引擎、渲染引擎、网络、UI后端、js引擎、数据存储; 网络:发送网络请求;UI...

  • 简单请求和非简单请求1

    简单请求和非简单请求1 1、浏览器发送跨域请求,如何判断? 浏览器在发送跨域请求的时候,会先判断下是简单请求还是非...

  • 关闭页面onbeforeunload事件

    问题: 工作遇到需要单点登录的需求,前端需要配合后端需要在整个浏览器关闭和浏览器tab标签关闭时通知后端用户下线,...

  • js阻止页面刷新

    网页中用户的表单填写到一半,或者ajax请求发送期间,如果用户刷新浏览器可能会导致数据保存失败。需要阻止页面刷新,...

  • localStorage & cookie & session

    cookie Cookie 是浏览器访问服务器后,服务器传给浏览器的一段数据。用来记录某些当页面关闭或者刷新后仍然...

网友评论

      本文标题:判断浏览器刷新还是关闭并向后端发送数据navigator.sen

      本文链接:https://www.haomeiwen.com/subject/mgqjkjtx.html