Question

我尝试创建类似动态页面的内容，但我遇到了这个问题。当我触发history.pushState时，它会创建大量的历史记录条目，即使触发它的动作只运行一次。我的代码如下：

    var url = 'http://localhost:8888/depeche-mode/violator'; // example url

    var plainUrl = url + '/?plain',
        startUrl = 'http://localhost:8888/',
        newUrl = url.replace(startUrl, '#/');

    $('#content').animate({
        opacity: 0
    }, 250, function() {
        $('#content').load(plainUrl +' #content > *', function(response) {
            $('#content').animate({opacity:1}, 250, function() {
            document.title = pageTitle;
            Posts.historyHash(newUrl);
        });
        });
    });

编辑：

var Posts = {
    historyHash: function(newUrl) {
        window.location.hash = newUrl;
        $(window).bind('hashchange', function() {
            var url = window.location.hash,
                nohash = url.replace('#',''),
                properUrl = 'http://localhost:8888/'+nohash;
                history.pushState('','',newUrl);
        });
    }
}

当我想在浏览器中使用Back按钮时问题非常严重 - 在实际更改网址之前，我需要点击几次。我该怎么办？

Answer 1

您在加载内容时呼叫historyHash，并且historyHash在window上注册了一个事件处理程序 - 每次都会调用。因此，最终会为hashchange事件提供一堆事件处理程序。

你大概只想要一个。要么只注册一个，要么在注册新注册时取消注册前一个。

我无法确定你想要哪一个，但是当处理程序使用newUrl时，很可能你想取消注册以前的处理程序。如果是这样，最好使用事件名称空间，这样您只需取消注册自己的处理程序：

var Posts = { historyHash: function(newUrl) { window.location.hash = newUrl; $(window) .unbind('hashchange.historyhash') // Out with the old .bind('hashchange.historyhash', function() { // In with the new var url = window.location.hash, nohash = url.replace('#',''), properUrl = 'http://localhost:8888/'+nohash; history.pushState('','',newUrl); }); } }

虽然看了它，但您可以使用单个处理程序并记住newUrl上的Posts：

var Posts = { historyHash: function(newUrl) { window.location.hash = newUrl; this.newUrl = newUrl; } }; $(window).bind('hashchange', function() { var url, nohash, properUrl; if (Posts.newUrl) { url = window.location.hash, nohash = url.replace('#',''), properUrl = 'http://localhost:8888/'+nohash; history.pushState('','',Posts.newUrl); } });

History.pushState创建大量条目

1 个答案: