saving history object with Iframe in browser

问题

I'm having problem with implement recovering browser history.
I have four html files, and one is parent html, and others are child pages. (they are 1.html, 2.html, 3.html and are loaded inside iframe.)

let me see you flow of my implementation to help you to understand what I'm doing. you don't need to check button create variable. please see two button below go back and go next, and input tag and navigation back.

following is my source code.

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <title>Document</title>
</head>

<body>
  <iframe src="./1.html" id="mainIframe"> </iframe>

  <div>
    <span id="upper-btn-div">
      <input type="button" value="go back" onclick="navi_back()" id="goback" />
      <input type="button" value="go next" onclick="navi_front()" id="gonext" />
    </span>
  </div>

</body>

<script>
  var i = 1;

  function navi_front() {
    var elem = document.getElementById("mainIframe");
    elem.src = ++i + ".html";
  }

  function navi_back() {
    var elem = document.getElementById("mainIframe");
    elem.src = --i + ".html";
  }
</script>
</html>

as you can see in GIF, I can retrieve my document previous state exactly with navigation back. But I'm wondering whether I can handle history or can't. in GIF, there is only one input tag that I need to remember, but the problem in real world- I have to retrieve exactly previous state (including element animation). further more, I want to implement page navigation with index (page 1, page 2, page 3 ... and so on). If a user click any index that user already visited, then ask user to reload page or retrieve previous document state.

I tried to implement with history object that window object provide, but failed. and I'm looking for finding another approach. my source code will be used in local.

thank you for reading.

来源：https://stackoverflow.com/questions/59418818/saving-history-object-with-iframe-in-browser

标签

javascript

html

iframe

browser