成人欧美一区二区三区的电影,日韩一级一欧美一级国产,国产成人国拍亚洲精品,无码人妻精品一区二区三区毛片,伊人久久无码大香线蕉综合

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

JS 監(jiān)聽用戶頁面訪問和頁面關(guān)閉操作并進行數(shù)據(jù)上報

freeflydom
2025年10月14日 10:3 本文熱度 716

前言

最近在做安全方面的項目,有個需求是在用戶訪問頁面和關(guān)閉頁面的時候,發(fā)送對應(yīng)的數(shù)據(jù)。

剛拿到需求的時候,覺得沒啥東西,init 的時候發(fā)送一次,頁面 unload 的時候發(fā)送一次就行了,很簡單,后面開發(fā)了一下,又根據(jù)當前項目,發(fā)現(xiàn)沒這么簡單

一、需求背景

1、項目需求

用戶在頁面訪問時發(fā)送數(shù)據(jù)到后臺,頁面關(guān)閉時也發(fā)送數(shù)據(jù)到后臺。

2、需求解析

很簡單的一句話

但是我們前面說了,沒有這么簡單,那是因為我們的項目比較復雜

  1. 項目是一個龐大的項目,內(nèi)部有好多子系統(tǒng),子系統(tǒng)是通過 iframe 內(nèi)嵌的

  2. 點擊 nav 模塊進入到子系統(tǒng),當前頁面的 hash 不會改變,只會改變 location.pathname 和 document.title,但是這兩個改變有沒有事件監(jiān)聽到

  3. 點擊進入子系統(tǒng)時,也需要對之前的模塊進行關(guān)閉上報和當前模塊的訪問上報

  4. iframe 內(nèi)嵌的項目不需要單獨上報,在 top 層進行上報即可

  5. iframe 內(nèi)嵌的項目單獨通過 URL 訪問,則和當前項目一樣,需要訪問上報和關(guān)閉上報

3、需求概括

經(jīng)過分析,整體需求分為如下幾個點:

  1. 第一次進入頁面時觸發(fā)頁面訪問

  2. 刷新當前頁面時觸發(fā)頁面訪問

  3. 新 tab 進入頁面時觸發(fā)頁面訪問

  4. 當前頁面點擊 nav 進入其他模塊時,觸發(fā)頁面關(guān)閉&頁面訪問

  5. 關(guān)閉頁面時觸發(fā)頁面關(guān)閉

二、技術(shù)要點

主要包含以下幾點:

  1. cookie 存儲

  2. sessionStorage 存儲

  3. addEventListener 事件監(jiān)聽

  4. navigator.sendBeacon 數(shù)據(jù)發(fā)送

1、Cookie 存儲

使用 cookie 主要是因為項目的 domain 都一樣,存儲不同頁面的 title、hrefreferrer 等數(shù)據(jù)

【Cookie】

2、SessionStorage 存儲

這個主要是對在當前 tab 頁下的跳轉(zhuǎn)進行判斷,用來區(qū)分是否首次進入當前 tab

【SessionStorage】

3、addEventListener 事件監(jiān)聽

事件監(jiān)聽,注意是用來監(jiān)聽 unload 事件。

【addEventListener MDN】

4、navigator.sendBeacon 數(shù)據(jù)發(fā)送

這個我們后面在水一篇文章,單獨講講,本期只講用法

navigator.sendBeacon() 方法可用于通過 HTTP POST 將少量數(shù)據(jù)異步傳輸?shù)?nbsp;Web 服務(wù)器。

4.1. 語法

navigator.sendBeacon(url);
navigator.sendBeacon(url, data);

4.2. 參數(shù)

4.2.1. url

url 參數(shù)表明 data 將要被發(fā)送到的網(wǎng)絡(luò)地址。

4.2.2. data 可選

data 參數(shù)是將要發(fā)送的 ArrayBufferArrayBufferView、BlobDOMString、FormData 或 URLSearchParams 類型的數(shù)據(jù)。

4.3. 返回值

當用戶代理成功把數(shù)據(jù)加入傳輸隊列時,sendBeacon() 方法將會返回 true,否則返回 false

【navigator.sendBeacon】

三、需求實現(xiàn)

1、實現(xiàn)思路

1.1. 第一次進入頁面

  1. 無 session 無 cookie

  2. 調(diào)用 urlDetectChange 函數(shù)

  3. 觸發(fā) openPage() 進行頁面訪問上報

  4. 設(shè)置 session 字段

  5. setTimeout 輪詢,設(shè)置 cookie 字段,監(jiān)聽 URL 變化

1.2. 刷新當前頁面

  1. 有 session 有 cookie

  2. 觸發(fā)頁面訪問上報

  3. setTimeout 輪詢,監(jiān)聽 URL 變化

1.3. 點擊 nav 進入其他模塊

  1. 有 session 有 cookie

  2. setTimeout 輪詢,當前 document 中的 title 和 href 與 cookie 中的不一致時,進行之前頁面關(guān)閉上報和當前頁面訪問上報

  3. 設(shè)置新的 cookie 值

  4. 繼續(xù) setTimeout 輪詢,監(jiān)聽 URL 變化

1.4. 新 tab 進入頁面

  1. 有 cookie 無 session

  2. 觸發(fā)頁面訪問上報

  3. 設(shè)置新的 cookie

  4. 繼續(xù) setTimeout 輪詢,監(jiān)聽 URL 變化

1.5. 關(guān)閉 tab

  1. 觸發(fā) unload 監(jiān)聽事件
  2. 進行頁面關(guān)閉上報

2、頁面訪問->頁面關(guān)閉流程圖

3、頁面訪問&頁面關(guān)閉數(shù)據(jù)上報流程圖

4、數(shù)據(jù)上報

/**
* 上報接口
* @param {object} data 上報接口參數(shù)
* @returns {boolean} sendBeacon 接口返回信息
*/
export const sendBeaconMessage = (data: object): boolean =>
  window.navigator.sendBeacon(
    'xxx',
    JSON.stringify(data)
  )
// Cookies 使用 js-cookie
/**
 * 設(shè)置 cookie 值
 * 設(shè)置 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、頁面訪問發(fā)送消息

/**
 * 頁面訪問發(fā)送消息
 * @param {object} data 上報接口參數(shù)
 * 設(shè)置 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、頁面關(guān)閉發(fā)送消息

/**
 * 頁面關(guān)閉發(fā)送消息
 * @param {object} data 上報接口參數(shù)
 */
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 改變進行監(jiān)聽&頁面關(guān)閉監(jiān)聽

/**
 * 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 內(nèi)部的項目不進行監(jiān)聽,只在 top 層進行數(shù)據(jù)上報
if (window.top === window.self) {
  // 頁面訪問上報 刷新頁面
  sessionStorage.getItem('ACCESS_CLOSE_SESSION_NAME') && openPageSendBeacon({})
  urlDetectChange()
  window.addEventListener('unload', () => closePageSendBeacon({}))
}

四、總結(jié)

  1. 頁面訪問&頁面關(guān)閉數(shù)據(jù)上報能清楚的掌握用戶的使用數(shù)據(jù),對營銷活動或者畫像分析很有幫助
  2. 整體沒有難點,就是不同項目不同分析
  3. 如果你的項目是 hash 改變,那就可以針對 hash 進行監(jiān)聽
  4. 主要就是使用 navigator.sendBeacon 進行可靠的數(shù)據(jù)傳輸

轉(zhuǎn)自https://www.cnblogs.com/risheng/p/18209237


該文章在 2025/10/14 10:03:03 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運作、調(diào)度、堆場、車隊、財務(wù)費用、相關(guān)報表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點,圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務(wù)都免費,不限功能、不限時間、不限用戶的免費OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved