從零開始搭建前端監控系統（二）——實現圈選（無埋點）

時間 2019-11-08

標籤開始搭建前端監控系統實現简体版

原文原文鏈接

前言

本系列文章旨在講解如何從零開始搭建前端監控系統。html

項目已經開源前端

項目地址：git

https://github.com/bombayjs/b... (web sdk)
https://github.com/bombayjs/b... (服務端，用於提供api)(未完)
https://github.com/bombayjs/b... （後臺管理系統，可視化數據等）（未完）

您的支持是咱們不斷前進的動力。github

喜歡請start!!!web

喜歡請start!!!api

喜歡請start!!!post

本文是該系列第二篇，重點講解如何實現圈選功能。ui

若是你還不瞭解怎麼捕獲click事件，請先看第一篇spa

系列文章：code

從零開始搭建前端監控系統（一）——web探針sdk

示例

https://bombayjs.github.io/bo...

演示

源碼

https://github.com/bombayjs/b...

原理

經過postMessage實現iframe的通訊
經過監聽mouseover事件來圈選
經過監聽click事件獲取點擊目標的路徑
經過stopPropagation阻止原來的點擊事件

實現

parent

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
    <iframe id='iframe' src='./a.html'></iframe>
</div>
  <script>
    window.addEventListener('message', function(event) {
      console.log(event.data.path)
    }, false)

  </script>
</body>
</html>

iframe

// a.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
    <a href='#a'>click me</a>
</div>
  <script>
    window.addEventListener('message', function(event) {
      console.log(event.data.path)
    }, false)


    window.addEventListener('click', function(event) {
      event.stopPropagation()
      window.parent.postMessage({
        path: '此處須要本身解析出元素路徑'
      }, '*')
      return
    }, false)
    
    window.addEventListener('mouseover', function(event) {
      event.target.style = 'border: #ff0000 solid 1px'
    }, false)
  </script>
</body>
</html>

從零開始搭建前端監控系統（二）——實現圈選（無埋點）

前言

示例

演示

源碼

原理

實現

parent

iframe

更多資源