Javascript 如何一次返回一页（返回参考页，而不是其本身）

历史回溯功能记录请求。一个页面可能会多次请求自己。因此，当按下后退按钮时，您可能会返回到同一页面的上一个请求

下面是一个非常简单的示例：

Alice.html：

<h1>This is Alice</h1>
<a href="charlie.php">Go to Charlie</a>

我是爱丽丝

Bob.html：

<h1>This is Bob</h1>
<a href="charlie.php">Go to Charlie</a>

我是鲍勃

Charlie.php：

<h1>This is Charlie</h1>
<p id="output">Here goes the server output</p>
<form method="post">
<input type="hidden" id="somevalue" name="somevalue" value="0">
<button type="button" onclick="window.history.go(-1);">Back</button>
<button type="submit">Calculate</button>
</form>
<script>
// Simulate some server side action
document.getElementById("output").innerHTML = document.getElementById("somevalue").value = "Value = " + Math.random();
</script>

我是查理
下面是服务器输出
返回
算计
//模拟一些服务器端操作
document.getElementById（“输出”）.innerHTML=document.getElementById（“somevalue”）.value=“value=”+Math.random（）；

Alice.html和Bob.html都链接到Charlie.php。 php有一个表单，可以多次调用它自己，对数据进行一些服务器操作

history back（历史记录返回）功能将返回一个请求，而不是一页。要返回Alice或Bob，用户必须按与隐藏“计算”按钮相同的次数返回按钮

问题：如何后退一页，而不考虑请求Charlie的数量

编辑：我正在寻找一个简单的“备份一页”按钮的通用解决方案，不使用服务器端变量

---

只有HTML5的解决方案是可以的。

对于给定的信息，最好的解决方案是创建反向链接或他们称之为面包屑的链接，将此人直接链接到您希望他们去的地方。你可以在任何地方添加一个链接，引导他们返回

如果我的回答还不够，那么请多解释一下，并提供一个指向您网站的链接：）。你越详细，答案就会是你所需要的

---

代码如下

//我是查理
我是查理
这是服务器的一些输出
返回
算计
//模拟一些服务器端操作
document.getElementById（“输出”）.innerHTML=document.getElementById（“somevalue”）.value=“value=”+Math.random（）；

不必浏览多个欺骗历史记录项，您可以首先使用以下方法防止创建它们：

• （这将替换当前历史记录项目中的页面，因此无需额外单击）

但是，由于您的“服务器对数据的操作”可能无法做到这一点，下面的代码可能会提供一个解决方案：

---

在下面的演示中（因此不允许会话存储），我必须模拟“浏览历史记录”和“每个历史记录项的页面加载”，因此代码看起来有点不同，使用数组和其他变量和函数，但原理应该是相同的：

代码笔：

---

jsfiddle:

这就是我现在要使用的解决方案。灵感来源于myfunkyside。：

我正在使用浏览器的会话存储来存储一堆页面名称，按外观顺序排列

一个back（可能是forward）函数，横穿堆栈，调用window.location.href调用页面

每个页面都包含以下代码来维护堆栈：

// Load or create a history array
var pageHistory = JSON.parse(sessionStorage.pageHistory || '[]');

// Find this page in history
var thisPageIndex = pageHistory.indexOf(window.location.pathname);

// If this page was not in the history, add it to the top of the stack
if( thisPageIndex < 0){
  pageHistory.push(window.location.pathname);
  thisPageIndex = pageHistory.length -1;

// Wipe the forward history
}else if(thisPageIndex < pageHistory.length -1){
  for(; thisPageIndex < pageHistory.length -1;)
    pageHistory.pop();
}

// Store history array   
sessionStorage.pageHistory = JSON.stringify(pageHistory);

// Back button function
function back(){
  if(thisPageIndex > 0 ) 
    window.location.href = pageHistory[thisPageIndex - 1]; 
}

// Disable back button if this is the first page
if(thisPageIndex < 1) 
  document.getElementById("backButton").disabled = true;

//加载或创建历史记录数组
var pageHistory=JSON.parse（sessionStorage.pageHistory | | |'[]）；
//在历史中找到这一页
var thisPageIndex=pageHistory.indexOf（window.location.pathname）；
//如果此页不在历史记录中，请将其添加到堆栈顶部
如果（thisPageIndex<0）{
pageHistory.push（窗口、位置、路径名）；
thisPageIndex=pageHistory.length-1；
//抹杀历史
}else if（thisPageIndex0）
window.location.href=pageHistory[thisPageIndex-1]；
}
//如果这是第一页，请禁用“后退”按钮
如果（thisPageIndex<1）
document.getElementById（“backButton”）.disabled=true；

按钮的定义如下：

<button type="button" id="backButton" onclick="back();">Back</button>

返回

不幸的是，这与浏览器历史记录不匹配。不过，它是纯客户端javascript，可以处理多个页面

---

这并不像我希望的那样优雅。我希望有人能提供更好的通用解决方案

这是一个有趣的答案。谢谢但是在接下来的17次计算中，需要大量的重新加载。。。我们可以改进吗？@SimonRiget您可以在导航到计算页面之前将上一页的URL存储到sessionStorage中。然后使用

location.href=sessionStorage.getItem（“href”）

，而不是使用history.go（-1）。在需要的地方使用location.replace，之后不要忘记使用sessionStorage.removietem。

<button type="button" id="backButton" onclick="back();">Back</button>