js 抓取頁面數據

數據抓取

主要思路和原理

• 在根節點document中監聽所有需要抓取的事件
• 在元素事件傳遞中，捕獲階段獲取事件信息，進行埋點
• 通過getBoundingClientRect() 方法可獲取元素的大小和位置
• 通過stopPropagation() 方法禁止事件繼續傳遞，控制觸發元素事件
• 在冒泡階段獲取數據，保存數據
• 通過settimeout異步執行數據統計獲取，避免影響頁面原有內容

相關知識點

• javascript事件運行機制
• javascript獲取元素位置

基礎代碼

 // 冒泡階段監聽所有事件
   document.body.addEventListener('click', function (event) {
     // 抓取數據
     settimeout(getData(event));
   }, flase);//這里寫flase是代表在冒泡階段
 
   // 捕獲階段監聽所有事件
   document.body.addEventListener('click', function (event) {
     // 是否為埋點模式
     if (!event.target.className.match(/\isSetting\b/)) {
       return;
     }
     // 這里禁止觸發點擊元素事件
     event.stopPropagation()
 
     // 是否已經埋點
     if (event.target.className.match(/\myclass\b/)) {
       settimeout(showDetail(event));
     }
     settimeout(newCanvas(event));
 
   }, true);//這里寫true是代表在捕獲階段
 
   // 創建canvers,位置和大小
   function newCanvas(event) {
     var rect = event.target.getBoundingClientRect();
     var mycanvas = document.createElement("canvas");
     mycanvas.id = "mycanvas";
     mycanvas.className = "myclass";
     mycanvas.style.zIndex = 8;
     mycanvas.style.top = rect.top + "px";
     mycanvas.style.left = rect.left + "px";
     mycanvas.height = rect.height;
     mycanvas.width = rect.width;
     document.body.appendChild(mycanvas);
   }
 
   // 發送抓取數據
   function getData(event) {
     // 存儲DOM相關數據，ajax發送數據
   }
 
   // 顯示埋點信息
   function showDetail(event) {
     // 顯示埋點的詳細信息
   }

流程圖