preface

This series of articles explains how to build a front-end monitoring system from scratch.

The project is open source

Project Address:

  • Github.com/bombayjs/bo… (web sdk)
  • Github.com/bombayjs/bo… (Server, used to provide API)(unfinished)
  • Github.com/bombayjs/bo… (Background management system, visual data, etc.)

Your support is the driving force for our continuous progress.

Like please start!!!!!!

Like please start!!!!!!

Like please start!!!!!!

This article, the second in a series, focuses on how to implement the circled feature.

If you don’t know how to catch click events, please read article 1

Series of articles:

  • Build front-end monitoring system from scratch (I) — Web probe SDK

The sample

Bombayjs. Making. IO/bombayjs/ex…

demo

The source code

Github.com/bombayjs/bo…

The principle of

  1. Iframe communication is realized through postMessage
  2. Loop by listening for mouseover events
  3. Get the path to the click target by listening for the click event
  4. Block the original click event by stopPropagation

implementation

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>

Copy the code

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 I need to resolve the element path myself'
      }, The '*')
      return
    }, false)
    
    window.addEventListener('mouseover'.function(event) {
      event.target.style = 'border: #ff0000 solid 1px'
    }, false)
  </script>
</body>
</html>
Copy the code

More resources

Github.com/abc-club/fr…