将 window.history 实现到 iframe答案

【问题标题】：implement the window.history to iframe将 window.history 实现到 iframe
【发布时间】：2020-10-06 13:27:49
【问题描述】：

我有导航菜单，基于单击菜单，我在 iframe 标记的 src 属性中加载相应的页面 url，并且我有两个按钮向后和向前。点击它，我需要分别取回和转发。在这种情况下，我不能使用 history.back()，因为我没有将 url 推送到位置对象，而只是更改了 iframe 的 src attr。我附上了代码sn-p供参考，分享你的想法

<button>prev</button>
<button>next</button>
<nav>
 <ul>
  <li><a href="page 1 url">page 1</a></li>
  <li><a href="page 2 url">page 2</a></li>
  <li><a href="page 3 url">page 3</a></li>
 </ul>
 </nav>

单击菜单时，我只是在 ifranme 标记中加载相应的页面 url

<iframe src="page1 url" />

在页面加载时，我将登陆第 1 页 url。如果我单击第 2 页链接，我将在 iframe src attr 中加载第 2 页 url。如果用户单击上一个按钮，我需要返回第 1 页，反之亦然。在这里，我需要跟踪 iframe url 的历史记录。需要使用 javascript 的解决方案

【问题讨论】：

您可以将他们的页面选择存储在一个数组中。然后使用push()将每个next页面添加到数组的末尾，如果他们选择prev，则使用pop()获取最后一页
我也需要继续前进。如果我执行 pop()，我将丢失历史记录并且无法让用户前进
如果你使用pop()，你一次删除一个页面——如果他们点击next你只是push()他们的新选择。如果您想查看完整的历史记录，您可以将他们的选择保留在数组上（即，不要使用pop()）并使用索引指针（变量）来定位当前、下一个和上一个选择。因此，他们进入的任何新页面，索引指针都将指向数组中的最后一项。如果它们返回，则将指针向后移动。如果他们往前走，你就上移一个。如果他们完全进入一个新页面，你 push() 将其移至数组并将指针移动到该页面。

标签： javascript html jquery

【解决方案1】：

这就是我认为你可以做到的方式。我只是使用选择列表来说明功能，因为我无法在此处真正链接到 iframe 中的大量页面。

let history = [];
let pointer = 0;


function newPage() {
  let s = document.getElementById("pages");
  let newPage = s.value;
  history.push(newPage);
  pointer = history.length - 1;
  displayPage();
}

function displayPage() {
  if (history.length > 0) {
    let dp = document.getElementById("pageselected");
    dp.innerHTML = history[pointer];
  }
}

function next() {
  pointer++;
  if (pointer == history.length) {
    pointer = history.length - 1;
  }
  displayPage();
}

function prev() {
  pointer--;
  if (pointer < 0) {
    pointer = 0;
  }
  displayPage();
}

<button onclick="prev();">Previous</button><button onclick="next();">Next</button> Page selected: <span id="pageselected"></span>

<hr>
<select id="pages" onchange="newPage();">
  <option value="0">--Select page--</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
</select>
<hr>

从选择列表中选择一个page，并将指针变量设置为该项目。选择另一个，指针再次设置到该项目。现在单击Previous 或Next 按钮，指针变量指向数组中的上一项或下一项。没有从数组中删除任何内容 - 仅添加下拉列表中的新选择。此后，指针控制显示的内容 - 在本例中，只是按钮右侧的页码。

【讨论】：