Build a front-end monitoring system from scratch (3)-realize the control of iframe forward and backward

Build a front-end monitoring system from scratch (3)-realize the control of iframe forward and backward

Preface

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

The project is open source

project address:

Your support is our driving force for continuous progress.

Like please star!!!

Like please star!!!

Like please star!!!

This article is the third in the series, focusing on how to control the forward and backward of the iframe.

Series of articles:

Example

repototest.github.io/demo/iframe...

Demo

Source code

github.com/abc-club/de...

If you want to see complex examples, you can see bombayjsthe source code

The background screenshot is as follows:

difficulty

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

There will be cross-domain problems when controlling in this way! ! !

principle

  1. To solve the cross-domain problem of iframe, we need to realize the communication of iframe through postMessage
  2. Control forward and backward through window.history.back() and window.history.forward()

achieve

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', '*');
    }

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

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


 

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
      }, '*')
      return
    }, false)
    
  </script>
</body>
</html>
 

More resources

github.com/abc-club/fr...