Preface
This series of articles aims to explain how to build a front-end monitoring system from scratch.
The project has been sourced
Project address:
- https://github.com/bombayjs/b... (web sdk)
- https://github.com/bombayjs/b... (Server, for providing api) (not finished)
- https://github.com/bombayjs/b... (background management system, visual data, etc.) (unfinished)
Your support is our driving force for continuous progress.
Like to start!!!
Like to start!!!
Like to start!!!
This article is the second in the series, focusing on how to achieve the circle selection function.
If you don't know how to capture click events, read the first article.
Series of articles:
Example
https://bombayjs.github.io/bo...
Demonstration
Source code
https://github.com/bombayjs/b...
principle
- Implementing iframe communication through postMessage
- Circle by listening for mouseover events
- Obtain the path of the click target by listening for click events
- Stop the original click event by stopPropagation
Realization
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: 'Here you need to resolve the element path yourself' }, '*') return }, false) window.addEventListener('mouseover', function(event) { event.target.style = 'border: #ff0000 solid 1px' }, false) </script> </body> </html>