javascript - 戻るボタンのハッシュ変更を防ぐ

Question

バックボーンハッシュルーティングを使用するアプリケーションがあります。ページがリロードされると、onbeforeunloadイベントを使用して、保存されていない変更があることをユーザーに通知し、ページのロードを防ぎます。これはハッシュ変更では機能しません。したがって、ユーザーが押し戻すと、ダイアログは保留中の変更があることを通知せず、ただ戻ります。

とにかくハッシュの変更を検出してそれが起こらないようにする方法はありますか？何かのようなものonbeforehashchange

Answer 1

いいえ、以下のようなもので発生するハッシュ変更を検出できますが、実際に発生する前に検出することはできません。変更する前にハッシュが必要な場合は、どこかに保存できます。

var myHash = document.location.hash;

$(document).on('hashchange', function() {
    if (myHash != document.location.hash) {
        //do something
    }
});

戻るボタンも実際には検出できず、リロードがトリガーされない場合も機能しonbeforeunloadません。

この機能が不可欠な場合は、haschangeプラグインまたはhistoryプラグインを試すことを検討してください。これらのいずれかを使用すると、これがはるかに簡単になり、ブラウザーの履歴と前後を制御できるようになります。

Answer 2

結局、ルーターに関数を作成しました。これは各ルートの前に実行され、jquery ui ダイアログを表示し、ルートを実行するための応答を待ちます。これは非常に厄介なコードで、アプリケーション固有のものを取り除きました。

close: function(callback) {
    var hash = window.location.hash;

    if (this.afterHash && this.afterHash == hash) {
        this.dialog.dialog("close");
        return;
    }

    callback = callback || function () {};
    if (window.onbeforeunload) {
        var text = window.onbeforeunload();
        if (text) {
            if (!this.dialog) {
                var t = this;
                this.afterHash = this.previous;
                this.dialog = $("<div><p>" + text + "</p><p>Are you sure you want to close the dialog?</p></div>").dialog({
                    modal: true,
                    width: 420,
                    title: "Confirm Navigation",
                    close: function() {
                        t.dialog.dialog("destroy");
                        if (t.afterHash) {
                            t.navigate(t.afterHash, {
                                trigger: false
                            });
                            t.afterHash = null;
                        }
                        t.dialog = null;
                    },
                    buttons: {
                        'Leave this Page': function() {
                            t.afterHash = null;
                            t.dialog.dialog("close");

                            closeViewer();
                            callback.apply(t);
                        },
                        'Stay on this Page': function() {
                            t.dialog.dialog("close");
                        }
                    }
                });
            }
            return;
        }
    }
    this.previous = window.location.hash;
    callback.apply(this);
},​

初期化時に追加する必要がありますthis.previous = window.location.hash;