5

pushStateを使用してWebサイトのURLを変更しています。

history.pushState("", "info", "/info");

これはうまく機能しますが、今は戻るボタンが機能しません。履歴スタックを調べて適切なページをレンダリングするonPopStateを使用して、独自の戻るボタンと進むボタンの動作を作成する必要があると思います。秘訣は、「戻る」がNullの場合、戻るボタンが通常行うことを実行する必要があることです（ユーザーが私のサイトに入る前にページに「戻る」）。

これはかなり標準的な動作のようですが、使用できるレシピ/標準コードはありますか？

4

5 に答える 5

2

ああ、思ったほど難しくない解決策を思いつきました（基本的には、URLパス名を使用して適切なものをレンダリングするだけです）：

// Makes the back button work
window.onpopstate = function(event) {
    if (document.location.pathname == '/main') {
        $("#main").show();
        $("#info").hide();
        $("#settings").hide();
    }
    if (document.location.pathname == '/info') {
        alert('info');
        $("#main").hide();
        $("#info").show();
        $("#settings").hide();
    }
    if (document.location.pathname == '/settings') {
        alert('settings');
        $("#main").hide();
        $("#info").hide();
        $("#settings").show();
    }
};
于 2011-01-12T00:35:12.867 に答える
1

フレームワークがなければ、次のようになります。

window.onpopstate = function(event){
   // do something
}
于 2013-05-05T05:24:00.647 に答える
1

私は自分でこの問題に遭遇したばかりで、なぜうまくいかないのかがわかったと思います。

ドキュメントは、このトピックについて非常に曖昧に見えます。私が読んだことは、空の文字列（または空のオブジェクト）を状態パラメーターに入力できることを示しています（例で行ったように）。

history.pushState("", "info", "/info");

これを行うと (Chrome と Firefox の両方でテスト)、ブラウザのアドレスバーのリンクを変更するという意味で、「戻る」ボタンと「進む」ボタンが機能します。ただし、それがすべてです。そのリンクに関連付けられたページは読み込まれません。

だから今これを試してください：

history.pushState({state: dummyState}, "info", "/info");

これで、「戻る」ボタンと「進む」ボタンが期待どおりに機能するようになりました。ブラウザが「ラッチする「状態」がない場合は、わざわざページをロードしない」と言っているようです。

Firefox と Chrome の両方で同じように動作することを考えると、これは文書化された機能だと思います。しかし、もしそうなら、それは私が探したいよりも深く埋もれています.

于 2013-07-07T13:46:34.753 に答える
0

戻るボタンが機能しないのは奇妙です。HTML5 以外のすべてのブラウザーに後方互換性を提供するHistory.jsを使用していますが、どのブラウザーやテスト スイートでもこの問題は発生していません。

于 2011-01-30T13:54:37.763 に答える
0

pushState を使用した後、戻るボタンと進むボタンの動作を実装するために自分で何もする必要はないと思います。以前と同じように機能するはずですが、http リクエストなどを行うのではなく、popstate をトリガーします。

私はDavis.jsを使用して、特定の onpopstate イベントを動作にルーティングして、あなたが持っているものと同様のことを達成しています。チェックしてください。

于 2011-02-04T13:13:17.673 に答える