web-dev-qa-db-ja.com

ページを再読み込みせずにブラウザの履歴に追加する

基本的に、フォームを含むページがあります。ユーザーがそのフォームを送信すると、Javscript関数が呼び出され、新しいフォームが動的に表示されます。

この時点で、ユーザーがブラウザの戻るボタンをクリックして最初のフォームに戻ることができるようにしたいと思います。これは可能ですか？

迅速な対応に感謝しますが、pushStateを機能させるのに問題があります。 HTMLに、「戻る」ボタンをクリックした後も「2番目のフォーム」が表示されます。

テストに使用したコードは次のとおりです。

<script>
function newPage(){
    history.pushState({state:1}, "State 1", "?state=1");
    document.getElementById('formBox').innerHTML="second form";
}
</script>


<input type="button" onclick="newPage();" value="forward" />
<div id='formBox'>first form</div>
javascripturlbrowserbackbrowser-history
19
twiz
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

関連 ドキュメントへのリンク 。

26
Elliot Bonneville

HTML5の履歴/状態APIで同様の動作を History.js を使用して実現しました。

すべてのHTML5ブラウザーに相互互換性のあるエクスペリエンスを提供します（それらはすべてHTML5 History APIを少し異なって実装し、異なる動作を引き起こし、時にはバグを引き起こします-History.jsはこれを修正して、エクスペリエンスが期待どおり/同じ/ HTML5ブラウザー全体で優れていることを保証します）

例：

History.pushState({state:1}, "State 1", "?state=1");
14
Michael Robinson