Question

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

这是一个非常简单的例子：

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>

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

历史记录返回功能会返回一个请求，而不是一个页面。要返回Alice或Bob，用户必须按下后退按钮的次数与她隐藏计算按钮的次数相同。

问题：无论向Charlie提出多少请求，如何退一页？

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

只有HTML5解决方案可以。

Answer 1

所提供信息的最佳解决方案是创建反向链接或他们所谓的面包屑，将该人直接链接到您希望他们前往的位置。您可以在任何指导它们的地方添加链接。

如果我的回答不够，那么请再解释一下，这将有助于提供您网站的链接:)。你的问题越详细，答案就是你需要的。

以下代码

<div>
<a href="index.php">Home</a> / <a href="bob.php">Bob</a> / This is Charlie </div>
<h1>This is Charlie</h1>
    <p id="output">Here comes the server some 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>

Answer 2

您可以使用以下方法阻止首先创建多个欺骗历史记录项，而不是导航它们：

location.replace()（这将替换当前历史记录项中的页面，因此无需额外点击）

但由于您的服务器操作数据＆＃34;可能无法实现，因此下面的代码可能会提供解决方案：

window.onload = function() {
  document.getElementById("back").onclick = function() {
    sessionStorage.setItem("href",location.href); //store current page into sessionStorage
    history.go(-1); //go back one page
  };
  if (location.href == sessionStorage.getItem("href")) {document.getElementById("back").click();} //if current page is the same as last one, go back one page
  else {sessionStorage.removeItem("href");} //clear sessionStorage
};

在下面的演示中（SO不允许 sessionStorage ）我必须模拟两个＆＃34;浏览历史记录＆＃34;和＆＃34;页面加载每个历史项目＆＃34;，所以代码看起来有点不同，使用数组和其他 vars 和函数，但原则应该是相同的：

codepen：https://codepen.io/anon/pen/OgBgGg?editors=1011
jsfiddle：https://jsfiddle.net/j0ddnboq/2/

Answer 3

这就是我现在要解决的问题。灵感来自 myfunkyside。：

我正在使用浏览器的sessionStorage按照外观的顺序存储一堆页面名称。

一个后退（可能是一个前向）函数，横向堆栈，调用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;

按钮的定义如下：

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

不幸的是，这与浏览器历史记录没有关系。然而，它是纯粹的客户端javascript，它适用于多个页面。

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

如何一次返回一页（返回引用页面，而不是自己）

3 个答案: