javascript - 防止后退按钮上的 hashchange

Question

我有一个使用骨干哈希路由的应用程序。当页面重新加载时，我使用该onbeforeunload事件告诉用户有未保存的更改并阻止页面加载。这不适用于哈希更改；因此，如果用户按下回，对话框不会告诉他们有未决的更改而只是返回。

有没有办法检测散列变化并防止它发生？就像是onbeforehashchange

Answer 1

不，您可以通过以下方式检测到 hashchange，但在它发生之前您无法真正检测到它。如果您在更改之前需要哈希，您可以将其存储在某个地方。

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;