前言
本系列文章旨在讲解如何从零开始搭建前端监控系统。
项目已经开源
项目地址：
- https://github.com/bombayjs/b... (web sdk)
- https://github.com/bombayjs/b... (服务端，用于提供api)(未完)
- https://github.com/bombayjs/b... （后台管理系统，可视化数据等）（未完）
您的支持是我们不断前进的动力。
喜欢请start!!!
喜欢请start!!!
喜欢请start!!!
本文是该系列第二篇，重点讲解如何实现圈选功能。
如果你还不了解怎么捕获click事件，请先看第一篇
系列文章：
- 从零开始搭建前端监控系统（一）——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>更多资源
https://github.com/abc-club/f...