一度に1ページ戻す方法（それ自体ではなく、参照ページに戻る）

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> 

アリスここ

は非常に単純化した例です。 htmlとBob.htmlの両方へのリンクCharlie.php。 Charlie.phpにはフォームがあり、何回かサーバーのデータ操作を行うために何度でも呼び出します。

ヒストリーバック関数は、1ページではなく1リクエストを戻します。アリスまたはボブに戻るには、計算ボタンを隠したのと同じ回数だけバックボタンを押す必要があります。

質問：Charlieへのリクエストの数に関係なく、1ページ戻す方法はありますか？

編集：サーバーサイド変数を使用せずに、単純な「1ページバックアップ」ボタンの汎用ソリューションを探しています。

HTML5のソリューションは問題ありません。

Answer 1

これは私が今のところして行くよソリューションをIT。 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です、私は複数のページで動作します。

私が望んでいたように、それほど洗練された解決策ではありません。誰かがより良い汎用ソリューションを提供できることを願っていますか？

Answer 2

与えられた情報の最適な解決策は、バックリンクを作成することです。つまり、リンク先を作成して、その人を自分が行きたい場所に直接リンクするブレッドクラムにすることができます。あなたはどこにでもそれらを導くリンクを追加することができます。

私の答えが十分でない場合は、もう少し説明してください、あなたのサイトへのリンクを提供するのに役立ちます:)。あなたはより詳細な答えが必要なものになります。

---

以下のコード

<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 3

代わりに、複数のパロディー履歴項目をナビゲートで、あなたが使用して、最初の場所で作成されてからそれらを防ぐことができるかもしれません。

• location.replace()（このwil lは現在の履歴項目でページなので、余分なクリック）

を置き換えるしかし、それが原因あなたの「データのサーバー操作」に、おそらくことはできませんので、以下のコードは、ソリューションを提供することがあります：

---

以下のデモで

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ことはできません）私は「歴史を通過する」、および「すべての履歴項目のためのページ・ロード」の両方をシミュレートしなければならなかったので、コードが使用して、少し違って見えますアレイおよび他のVARSと機能が、原理は同じでなければなりません：codepen

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