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

时间 2019-11-06

标签开始搭建前端监控系统实现繁體版

原文原文链接

前言

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

项目已经开源前端

项目地址：git

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

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

喜欢请start!!!web

喜欢请start!!!api

喜欢请start!!!bash

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

若是你还不了解怎么捕获click事件，请先看第一篇ui

系列文章：spa

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

示例

bombayjs.github.io/bombayjs/ex…

演示

源码

github.com/bombayjs/bo…

原理

经过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

更多资源