从零开始搭建前端监控系统二实现圈选无埋点

jiezi

5 年前

本系列文章旨在讲解如何从零开始搭建前端监控系统。

项目已经开源

项目地址：

https://github.com/bombayjs/b… (web sdk)
https://github.com/bombayjs/b… (服务端，用于提供 api)(未完)
https://github.com/bombayjs/b…（后台管理系统，可视化数据等）（未完）

您的支持是我们不断前进的动力。

喜欢请 start!!!

本文是该系列第二篇，重点讲解如何实现圈选功能。

如果你还不了解怎么捕获 click 事件，请先看第一篇

系列文章：

从零开始搭建前端监控系统（一）——web 探针 sdk

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

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

通过 postMessage 实现 iframe 的通信
通过监听 mouseover 事件来圈选
通过监听 click 事件获取点击目标的路径
通过 stopPropagation 阻止原来的点击事件

<!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>

// 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>

https://github.com/abc-club/f…

从零开始搭建前端监控系统二实现圈选无埋点

前言

示例

演示

源码

原理

实现

parent

iframe

更多资源