[解決済み] AJAXアプリケーションで戻るボタンへの呼び出しを拒否する

質問

AJAXアプリを持っています。ユーザーがボタンをクリックすると、ページの表示が変更されます。ユーザーは元の状態に戻ることを期待して戻るボタンをクリックしますが、その代わりにブラウザで前のページに移動します。

戻るボタンのイベントをインターセプトして再割り当てするにはどうしたらよいでしょうか。RSH のようなライブラリを調べましたし (これは動作させることができませんでしたが...)、ハッシュ タグを使用するとどうにかなると聞きましたが、意味がわかりません。

どうすれば解決するのでしょうか？

あ、戻るボタンだ。戻る」ボタンを押すと、JavaScript のイベントが発生し、それをキャンセルすることができます。

document.onHistoryGo = function() { return false; }

いいえ、そうではありません。単にそのような事象がないだけです。

もし、本当に ウェブ アプリ (いくつかの ajaxy 機能を持つ単なる Web サイトではなく) を本当に持っているなら、(あなたが言うように、URL のフラグメントを使用して) 戻るボタンを引き継ぐのは妥当です。Gmailはこれを行います。私が言っているのは、Web アプリがすべて 1 つのページ内にあり、すべて自己完結している場合についてです。

テクニックは簡単です。ユーザーが何かを変更するアクションを取るときはいつでも、すでにいるのと同じ URL にリダイレクトしますが、別のハッシュ フラグメントを使用します。たとえば

window.location.hash = "#deleted_something";
...
window.location.hash = "#did_something_else";

Web アプリケーションの全体的な状態がハッシュ化可能である場合、これはハッシュを使用するのに最適な場所です。たとえば、電子メールのリストがあるとすると、すべての電子メールの ID と既読/未読のステータスを連結して MD5 ハッシュを作成し、それをフラグメント ID として使用することができます。

この種のリダイレクト (ハッシュのみ) は、サーバーから何かを取得しようとはしませんが、ブラウザの履歴リストにスロットを挿入することはできます。したがって、上記の例では、ユーザーが "back" を押すと、次のように表示されます。 #deleted_something と表示されています。もう一度「戻る」を押すと、まだあなたのページにいますが、ハッシュは表示されていません。次にもう一度戻ると、彼らは 実際に に戻ります。

さて、難しいのは、JavaScriptでユーザーが戻ったことを検知することです（それで状態を元に戻すことができます）。あなたがすることは、ウィンドウの位置を監視し、それがいつ変更されるかを見ることだけです。ポーリングで。(ポーリングなんて嫌ですよね。でも、クロスブラウザーでこれ以上のものはありません)。しかし、前進したか後退したかは分からないので、ハッシュの識別子を工夫する必要がある。(おそらく、ハッシュをシーケンス番号と結合したもの...)

これがコードの骨子です。(これはjQuery Historyプラグインが動作する方法でもあります。)

var hash = window.location.hash;
setInterval(function(){
    if (window.location.hash != hash) {
        hash = window.location.hash;
        alert("User went back or forward to application state represented by " + hash);
    }
}, 100);