JS 监听用户页面访问&页面关闭操作并进行数据上报
前言
最近在做安全方面的项目，有个需求是在用户访问页面和关闭页面的时候，发送对应的数据。
刚拿到需求的时候，觉得没啥东西，init 的时候发送一次，页面 unload 的时候发送一次就行了，很简单，后面开发了一下，又根据当前项目，发现没这么简单
一、需求背景
1、项目需求
用户在页面访问时发送数据到后台，页面关闭时也发送数据到后台。
2、需求解析
很简单的一句话
但是我们前面说了，没有这么简单，那是因为我们的项目比较复杂
- 项目是一个庞大的项目，内部有好多子系统，子系统是通过 iframe 内嵌的
- 点击
nav模块进入到子系统，当前页面的hash不会改变，只会改变location.pathname和document.title，但是这两个改变有没有事件监听到 - 点击进入子系统时，也需要对之前的模块进行关闭上报和当前模块的访问上报
iframe内嵌的项目不需要单独上报，在top层进行上报即可iframe内嵌的项目单独通过URL访问，则和当前项目一样，需要访问上报和关闭上报
3、需求概括
经过分析，整体需求分为如下几个点：
- 第一次进入页面时触发页面访问
- 刷新当前页面时触发页面访问
- 新 tab 进入页面时触发页面访问
- 当前页面点击 nav 进入其他模块时，触发页面关闭&页面访问
- 关闭页面时触发页面关闭
二、技术要点
主要包含以下几点：
cookie存储sessionStorage存储addEventListener事件监听navigator.sendBeacon数据发送
1、Cookie 存储
使用 cookie 主要是因为项目的 domain 都一样，存储不同页面的 title、href、referrer 等数据
2、SessionStorage 存储
这个主要是对在当前 tab 页下的跳转进行判断，用来区分是否首次进入当前 tab
3、addEventListener 事件监听
事件监听，注意是用来监听 unload 事件。
4、navigator.sendBeacon 数据发送
这个我们后面在水一篇文章，单独讲讲，本期只讲用法
navigator.sendBeacon() 方法可用于通过 HTTP POST 将少量数据异步传输到 Web 服务器。
4.1. 语法
navigator.sendBeacon(url); navigator.sendBeacon(url, data);
4.2. 参数
4.2.1. url
url 参数表明 data 将要被发送到的网络地址。
4.2.2. data 可选
data 参数是将要发送的 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据。
4.3. 返回值
当用户代理成功把数据加入传输队列时，sendBeacon() 方法将会返回 true，否则返回 false。
三、需求实现
1、实现思路
1.1. 第一次进入页面
- 无
session无cookie - 调用
urlDetectChange函数 - 触发
openPage()进行页面访问上报 - 设置
session字段 setTimeout轮询，设置cookie字段，监听URL变化
1.2. 刷新当前页面
- 有
session有cookie - 触发页面访问上报
setTimeout轮询，监听URL变化
1.3. 点击 nav 进入其他模块
- 有
session有cookie setTimeout轮询，当前document中的title和href与cookie中的不一致时，进行之前页面关闭上报和当前页面访问上报- 设置新的
cookie值 - 继续
setTimeout轮询，监听URL变化
1.4. 新 tab 进入页面
- 有
cookie无session - 触发页面访问上报
- 设置新的
cookie - 继续
setTimeout轮询，监听URL变化
1.5. 关闭 tab
- 触发
unload监听事件 - 进行页面关闭上报
2、页面访问->页面关闭流程图
3、页面访问&页面关闭数据上报流程图
4、数据上报
/** * 上报接口 * @param {object} data 上报接口参数 * @returns {boolean} sendBeacon 接口返回信息 */ export const sendBeaconMessage = (data: object): boolean => window.navigator.sendBeacon( 'xxx', JSON.stringify(data) )
5、设置 cookie 的值
// Cookies 使用 js-cookie /** * 设置 cookie 值 * 设置 href、pageTitle、referrer 字段 * key 为 ACCESS_CLOSE_COOKIE_NAME * domain 为 '.xxx.com' */ export const setAccessPageCookie = () => Cookies.set( 'ACCESS_CLOSE_COOKIE_NAME', JSON.stringify({ href: location.href, pageTitle: document.title, referrer: document.referrer }), { domain: '.xxx.com', expires: 30 } )
6、页面访问发送消息
/** * 页面访问发送消息 * @param {object} data 上报接口参数 * 设置 sessionStorage 的值， */ export const openPageSendBeacon = async (data: object) => { sessionStorage.setItem('ACCESS_CLOSE_SESSION_NAME', 'ISTRUE') const sendBeaconSusscess = sendBeaconMessage(data) // 打印 sendBeaconSusscess 的值 console.log( '%c client:sendDataToRemote use sendBeacon access page: %o', 'color: green;', sendBeaconSusscess ) }
7、页面关闭发送消息
/** * 页面关闭发送消息 * @param {object} data 上报接口参数 */ export const closePageSendBeacon = async (data: object) => { const sendBeaconSusscess = sendBeaconMessage(data) // 打印 sendBeaconSusscess 的值 console.log( '%c client:sendDataToRemote use sendBeacon close page: %o, ', 'color: red;', sendBeaconSusscess ) }
8、URL 改变进行监听&页面关闭监听
/** * URL 改变事件 */ export const urlDetectChange = () => { const accessPageData = Cookies.get('ACCESS_CLOSE_COOKIE_NAME') ? JSON.parse(Cookies.get('ACCESS_CLOSE_COOKIE_NAME')) : null const sessionAccessData = sessionStorage.getItem('ACCESS_CLOSE_SESSION_NAME') // 第一次进入页面 和 新 tab 进入页面 if (!accessPageData || !sessionAccessData) { openPageSendBeacon({}) } setTimeout(() => { if ( accessPageData && location.href !== accessPageData.href && document.title !== accessPageData.pageTitle && sessionAccessData ) { // 点击 nav 进入其他模块 closePageSendBeacon({}) openPageSendBeacon({}) } setAccessPageCookie() urlDetectChange() }, 1000) } // 加这个是针对 iframe 内部的项目不进行监听，只在 top 层进行数据上报 if (window.top === window.self) { // 页面访问上报 刷新页面 sessionStorage.getItem('ACCESS_CLOSE_SESSION_NAME') && openPageSendBeacon({}) urlDetectChange() window.addEventListener('unload', () => closePageSendBeacon({})) }
四、总结
- 页面访问&页面关闭数据上报能清楚的掌握用户的使用数据，对营销活动或者画像分析很有帮助
- 整体没有难点，就是不同项目不同分析
- 如果你的项目是
hash改变，那就可以针对hash进行监听 - 主要就是使用
navigator.sendBeacon进行可靠的数据传输
