共计 1503 个字符，预计需要花费 4 分钟才能阅读完成。
前言
本系列文章旨在讲解如何从零开始搭建前端监控系统。
项目已经开源
项目地址：
- 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…
正文完