用navigator.sendBeacon完成网页埋点异步请求记录用户行为,当网页关闭的时候,依然后完美完成接口请求,不会因为浏览器关闭了被中断请求。

代码用例

<template><div :class="$options.name"><el-button type="primary" @click="sendBeacon">navigator.sendBeacon 请求埋点接口 发送json对象数据</el-button></div>
</template><script>
export default {created() {// 当网页卸载关闭的时候,记录用户行为window.onunload  = (event) => {this.sendBeacon(); //关闭浏览器选项卡进行埋点记录 }; },methods: {sendBeacon() {if (!navigator.sendBeacon) return;let data = JSON.stringify({ID: "adaba34fa4004ea699fac9ab473d1bfe",//用户行为触发受体对象资源ID用户行为类型: "行为枚举值常量",停留时长: 10 * 1000,//毫秒操作起始时间: "2024-01-26 14:56:42",操作结束时间: "2024-01-26 14:56:45",});navigator.sendBeacon(`API接口地址路径`,new Blob([data], { type: "application/x-www-form-urlencoded; charset=UTF-8" }));},},
};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/649662.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java web 职位推荐系系统Myeclipse开发mysql数据库协同过滤算法java编程计算机网页项目

一、源码特点 java Web职位推荐系统是一套完善的java web信息管理系统 &#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0…

【小白教程】幻兽帕鲁服务器一键搭建 | 支持更新 | 自定义配置

幻兽帕鲁刚上线就百万在线人数&#xff0c;官方服务器的又经常不稳定&#xff0c;所以这里给大家带来最快捷的搭建教程&#xff0c;废话不多说直接开始。 步骤一&#xff1a;准备服务器 服务器建议 Linux 系统&#xff0c;资源占用低&#xff0c;而且一键脚本只需要一条命令&am…

安卓程序开发——搭建主页框架

一、实验目的 搭建项目框架掌握Android Activity组件使用和Intent机制&#xff0c;加强对Activity生命周期的理解&#xff0c;掌握Fragment的使用。 二、实验设备及器件 Android Studio 三、实验内容 1.创建一个Android应用&#xff0c;设置工程名MobileShop&#xff0c;包…

react的高阶函数HOC:

React 的高阶组件&#xff08;Higher-Order Component&#xff0c;HOC&#xff09;是一种用于复用组件逻辑的模式。它是一个函数&#xff0c;接收一个组件作为参数&#xff0c;并返回一个新的增强过的组件。 HOC 可以用于实现以下功能&#xff1a; 代码复用&#xff1a;通过将…

Android主流框架汇总

Android主流框架汇总 Android 百大框架 Android 常用开发框架 Android MVP 快速开发框架 Android 开源框架【集合】 AndroidFire 新闻阅读App框架 RxPermissions——Android 申请运行时权限 RxPermissions——Android 动态权限申请库 SuperTextView——绘制控件UI XPopup——An…

linux系统nginx工具接口压力测试工具和关联php页面

接口压力测试工具和nginx关联php ab接口压力测试工具工具下载与使用参数选项内容解释ab性能指标吞吐率&#xff08;Requests per second&#xff09;并发连接数&#xff08;The number of concurrent connections&#xff09;并发用户数&#xff08;Concurrency Level&#xff…

携程开源 基于真实请求与数据的流量回放测试平台、自动化接口测试平台AREX

携程开源 基于真实请求与数据的流量回放测试平台、自动化接口测试平台AREX 官网文档 基于真实请求与数据的流量回放测试平台、自动化接口测试平台AREX 这篇文章稍稍水一下&#xff0c;主要讲下部署过程里踩的坑&#xff0c;因为部署的过程主要是运维同学去处理了&#xff0c;我…

【Spring 篇】MyBatis DAO层实现:数据之舞的精灵

欢迎来到MyBatis DAO层的神奇世界&#xff0c;这里将为你揭示DAO层的奥秘&#xff0c;让你成为数据之舞的精灵。无论你是初学者还是想要深入了解DAO层的开发者&#xff0c;这篇博客将引导你踏入MyBatis DAO层的王国&#xff0c;一探其中的精彩。 舞台1&#xff1a;DAO层的角色…

人脸识别 FaceNet人脸识别(一种人脸识别与聚类的统一嵌入表示)

人脸识别 FaceNet人脸识别&#xff08;一种人脸识别与聚类的统一嵌入表示&#xff09; FaceNet的简介Facenet的实现思路训练部分 FaceNet的简介 Facenet的实现思路 import torch.nn as nndef conv_bn(inp, oup, stride 1):return nn.Sequential(nn.Conv2d(inp, oup, 3, stride…

FIND_IN_SET的使用:mysql表数据多角色、多用户查询

MySQL 函数 FIND_IN_SET 是用于在逗号分隔的字符串中查找特定值的函数。它的语法如下&#xff1a; FIND_IN_SET(search_value, comma_separated_string)search_value 是要查找的值。 comma_separated_string 是逗号分隔的字符串&#xff0c;在这个字符串中查找指定的值。FIND_…

Redis 面试题 | 14.精选Redis高频面试题

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

手机视频压缩怎么压缩?一键瘦身~

现在手机已经成为我们日常生活中必不可少的工具&#xff0c;而在手机的应用领域中&#xff0c;文件的传输和存储是一个非常重要的问题。很多用户都会遇到这样一个问题&#xff0c;那就是在手机上存储的文件太多太大&#xff0c;导致手机存储空间不足&#xff0c;那么怎么在手机…

初识MQRabbitMQ快速入门

一、同步和异步通讯 微服务间通讯有同步和异步两种方式&#xff1a; 同步通讯&#xff1a;就像打电话&#xff0c;需要实时响应。 异步通讯&#xff1a;就像发邮件&#xff0c;不需要马上回复。 两种方式各有优劣&#xff0c;打电话可以立即得到响应&#xff0c;但是你却不能…

【LUA】mac状态栏添加天气

基于网络上的版本修改的&#xff0c;找不到出处了。第一个摸索的lua脚本&#xff0c;调了很久。 主要修改&#xff1a;如果风速不大&#xff0c;就默认不显示&#xff0c;以及调整为了一些格式 local urlApi http://.. --这个urlApi去申请个免费的就可以了 然后打开对应的json…

七分钟交友匿名聊天室源码

多人在线聊天交友工具&#xff0c;无需注册即可畅所欲言&#xff01;你也可以放心讲述自己的故事&#xff0c;说出自己的秘密&#xff0c;因为谁也不知道对方是谁。 运行说明&#xff1a; 安装依赖项&#xff1a;npm install 启动&#xff1a;node app.js 运行&#xff1a;直接…

范围查询优化:索引跳跃扫描

范围查询优化&#xff1a;索引跳跃扫描 如果是联合索引的话&#xff0c;在构造B树的时候&#xff0c;会先按照左边的 key进行排序&#xff0c;左边的 key 相同时再依次按照右边的 key 排序。在通过索引查询的时候&#xff0c;也需要遵守最左前缀匹配的原则&#xff0c;也就是需…

使用 Docker 部署 Nacos 并配置 MySQL 数据源

前言 在安装 Nacos 之前&#xff0c;请确保你已经准备好了一个运行中的 MySQL 数据库。本教程将指导您如何使用 Docker 在单机模式下部署 Nacos&#xff0c;并将其数据持久化到 MySQL 中。 步骤一&#xff1a;拉取 Nacos 镜像 拉取最新版本的 Nacos Server 镜像&#xff0c;…

1月25日,每日信息差

第一、中国和新加坡互免签证&#xff0c;新加坡酒店搜索量较发布前增长4倍。去哪儿数据显示&#xff0c;新加坡酒店搜索量较发布前增长4倍&#xff0c;仍在持续增长中。同程旅行数据显示&#xff0c;消息发布半小时内&#xff0c;同程旅行平台新加坡相关搜索热度较前日同一时段…

Java算法 leetcode简单刷题记录8

Java算法 leetcode简单刷题记录8 找出不同元素数目差数组&#xff1a; https://leetcode.cn/problems/find-the-distinct-difference-array/ 保龄球游戏的获胜者&#xff1a; https://leetcode.cn/problems/determine-the-winner-of-a-bowling-game/ 计数器II&#xff1a; ht…

配置虚拟机通过系统代理

配置虚拟机通过系统代理 说明Windows 主机查询IP地址代理软件配置虚拟机下配置 说明 主机环境: Win11虚拟机环境: VMware Ubantu16.04 Windows 主机查询IP地址 在cmd下输入ipconfig, 复制IPv4地址 代理软件配置 在代理软件的参数设置下打开允许来自局域网的连接 虚拟机下…