当前位置：首页 » 游戏攻略 » JS 监听用户页面访问&页面关闭并进行数据上报操作

JS 监听用户页面访问&页面关闭并进行数据上报操作

Gamer • 2024-05-24 11:46:34 • 游戏攻略

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
等数据

【Cookie】

2、SessionStorage 存储

这个主要是对在当前
tab
页下的跳转进行判断，用来区分是否首次进入当前
tab

【SessionStorage】

3、addEventListener 事件监听

事件监听，注意是用来监听
unload
事件。

【addEventListener MDN】

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
。

【navigator.sendBeacon】

三、需求实现

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
进行可靠的数据传输