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 the star, please!!!!!!

Like the star, please!!!!!!

Like the star, please!!!!!!

This article, the third in a series, focuses on how to control iframe forward and backward.

Series of articles:

  • Build front-end monitoring system from scratch (I) — Web probe SDK
  • Build front-end monitoring system from scratch (II) — realize circular selection (no buried point) K

The sample

Repototest. Making. IO/demo/iframe…

demo

The source code

Github.com/abc-club/de…

If you want to see more complex examples, you can see the source code for BombayJS

Background screenshot is as follows:

The difficulties in

document.getElementById('iframe id').contentWindow.history.back();
Copy the code

There are cross – domain problems with controlling in this way!!

The principle of

  1. To solve the cross-domain problem of IFrame, we need to implement iframe communication through postMessage
  2. Use window.history.back() and window.history.forward() to control forward and back

implementation

index.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>
    <iframe id='iframe'></iframe>
    <br/>
    url: <span id='url'></span>
    <br/>
    <button id='back' onclick='back()'>back</button>
    <button id='forward' onclick='forward()'>forward</button>
</div>
  <script>
    var url = './iframe.html'
    var div = document.getElementById('url'),
        iframe = document.getElementById('iframe')
    iframe.src = url
    div.innerHTML = url
    window.addEventListener('message'.function(event) {
      if(! event.data.url)return
      div.innerHTML = event.data.url;
    }, false)


    function back() {
      iframe.contentWindow.postMessage('back'.The '*');
    }

    function forward() {
      iframe.contentWindow.postMessage('forward'.The '*');
    }

  </script>
</body>
</html>


Copy the code

iframe.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'>to #a</a>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p id='a'>a</p>
    <p>2</p>
    <p>2</p>
    <p>2</p>
    <p>2</p>
    <p>2</p>
    <p>2</p>
    <p>2</p>
    <p>2</p>
</div>
  <script>
    window.addEventListener('message'.function(event) {
      if (event.data === 'back') {
        window.history.back()
      } else {
        window.history.forward()
      }
    }, false)


    window.addEventListener('hashchange'.function(event) {
      window.parent.postMessage({
        url: location.href
      }, The '*')
      return
    }, false)
    
  </script>
</body>
</html>
Copy the code

More resources

Github.com/abc-club/fr…