Question

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

无论如何都要检测哈希变化并防止它发生？像onbeforehashchange

这样的东西

Answer 1

不，你可以通过下面的内容检测到hashchange，但是在它发生之前你无法真正检测到它。如果您在更改之前需要哈希，则可以将其存储在某处。

var myHash = document.location.hash;

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

您也无法真正检测到后退按钮，如果它没有触发重新加载，onbeforeunload也无效。

如果此功能至关重要，您应该考虑尝试使用haschange plugin或history plugin，因为其中之一可以让您更轻松，并且可以让您控制浏览器历史记录和来回。

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;

防止后退按钮上的hashchange

2 个答案: