带有history.pushState和popstate的Ajax - 当popstate state属性为null时,我该怎么办?

时间:2013-01-08 12:34:35

标签: javascript jquery html5 browser-history html5-history

我正在尝试使用ajax加载内容的HTML5历史记录API。

我有一堆通过相关链接连接的测试页面。我有这个JS,它处理这些链接的点击。单击链接时,处理程序会获取其href属性并将其传递给ajaxLoadPage(),该页面将所请求页面中的内容加载到当前页面的内容区域中。 (我的PHP页面设置为在正常请求时返回完整的HTML页面,但只有一小部分内容,如果?fragment = true附加到请求的URL。)

然后我的点击处理程序调用history.pushState()以在地址栏中显示URL并将其添加到浏览器历史记录中。

$(document).ready(function(){

    var content = $('#content');

    var ajaxLoadPage = function (url) {
        console.log('Loading ' + url + ' fragment');
        content.load(url + '?fragment=true');
    }

    // Handle click event of all links with href not starting with http, https or #
    $('a').not('[href^=http], [href^=https], [href^=#]').on('click', function(e){

        e.preventDefault();
        var href = $(this).attr('href');
        ajaxLoadPage(href);
        history.pushState({page:href}, null, href);

    });

    // This mostly works - only problem is when popstate happens and state is null
    // e.g. when we try to go back to the initial page we loaded normally
    $(window).bind('popstate', function(event){
        console.log('Popstate');
        var state = event.originalEvent.state;
        console.log(state);
        if (state !== null) {
            if (state.page !== undefined) {
                ajaxLoadPage(state.page);
            }
        }
    });

});

使用pushState向历史记录添加URL时,还需要为popstate事件包含一个事件处理程序,以处理后退或前进按钮上的点击。 (如果你不这样做,点击后面会显示你在地址栏中推送到历史记录的URL,但页面没有更新。)所以我的popstate处理程序抓取保存在我创建的每个条目的state属性中的URL,并将其传递给ajaxLoadPage以加载适当的内容。

这适用于我的点击处理程序添加到历史记录中的页面。但是当我“正常”请求浏览器时,浏览器添加到历史记录的页面会发生什么?假设我正常登陆我的第一页,然后通过点击进行ajax加载浏览我的网站 - 如果我然后尝试将历史记录返回到第一页,则最后一次单击显示第一页的URL,但不是不要在浏览器中加载页面。那是为什么?

我可以看到这与最后一个popstate事件的state属性有关。对于该事件,state属性为null,因为它只是由pushState()或replaceState()添加到历史记录中的条目,可以为其赋值。但我第一次加载页面是一个“正常”的请求 - 为什么浏览器不会退回并正常加载初始URL?

6 个答案:

答案 0 :(得分:13)

这是一个较旧的问题,但使用原生javascript解决此问题的答案要简单得多。

对于初始状态,您不应使用history.pushState,而应使用history.replaceState

两种方法的所有参数都相同,唯一的区别是pushState创建了一条新的历史记录,因此是您问题的根源。 replaceState仅替换该历史记录的状态,并将按预期运行,即返回初始起始页。

答案 1 :(得分:6)

我遇到了与原始问题相同的问题。这一行

var initialPop = !popped && location.href == initialURL;

应改为

var initialPop = !popped;

这足以捕捉最初的流行音乐。然后,您无需将原始页面添加到pushState。即删除以下内容:

var home = 'index.html';
history.pushState({page:home}, null, home);

最终代码基于AJAX标签(并使用Mootools):

if ( this.supports_history_api() ) {
    var popped = ('state' in window.history && window.history.state !== null)
    ,   changeTabBack = false;

    window.addEvent('myShowTabEvent', function ( url ) {
       if ( url && !changingTabBack )
           setLocation(url);
       else
           changingTabBack = false;
       //Make sure you do not add to the pushState after clicking the back button
    });

   window.addEventListener("popstate", function(e) {
       var initialPop = !popped;
       popped = true;
       if ( initialPop )
           return;

       var tabLink = $$('a[href="' + location.pathname + '"][data-toggle*=tab]')[0];
       if ( tabLink ) {
           changingTabBack = true;
           tabLink.tab('show');
       }
   });
}

答案 2 :(得分:5)

我仍然不明白为什么后退按钮的行为如此 - 我以为浏览器会很高兴回到正常请求创建的条目。也许当您使用pushState插入其他条目时,历史记录将以正常方式停止运行。但我发现了一种让我的代码更好的方法。您不能始终依赖包含要返回的URL的state属性。但是,回溯历史会改变地址栏中的URL,正如您所期望的那样,因此基于window.location加载内容可能更可靠。在great example之后我改变了我的popstate处理程序,以便根据地址栏中的URL加载内容,而不是在state属性中查找URL。

您必须注意的一件事是,当您最初点击某个页面时,某些浏览器(如Chrome)会触发一个popstate事件。发生这种情况时,您可能会不必要地重新加载初始页面的内容。所以我从优秀的pjax添加了一些代码来忽略那个初始的pop。

$(document).ready(function(){

    // Used to detect initial (useless) popstate.
    // If history.state exists, pushState() has created the current entry so we can
    // assume browser isn't going to fire initial popstate
    var popped = ('state' in window.history && window.history.state !== null), initialURL = location.href;

    var content = $('#content');

    var ajaxLoadPage = function (url) {

        console.log('Loading ' + url + ' fragment');
        content.load(url + '?fragment=true');

    }

    // Handle click event of all links with href not starting with http, https or #
    $('a').not('[href^=http], [href^=https], [href^=#]').on('click', function(e){

        e.preventDefault();
        var href = $(this).attr('href');
        ajaxLoadPage(href);
        history.pushState({page:href}, null, href);

    });

    $(window).bind('popstate', function(event){

        // Ignore inital popstate that some browsers fire on page load
        var initialPop = !popped && location.href == initialURL;
        popped = true;
        if (initialPop) return;

        console.log('Popstate');

        // By the time popstate has fired, location.pathname has been changed
        ajaxLoadPage(location.pathname);

    });

});

您可以对此JS进行的一项改进只是在浏览器支持历史记录API时附加click事件处理程序。

答案 3 :(得分:1)

我实际上发现自己今天有类似的需求,并发现你提供的代码非常有用。我遇到了你所遇到的同样问题,我相信你所缺少的就是将你的索引文件或主页推送到历史记录中,就像你所有后续页面一样。

以下是我为解决此问题所做的一个示例(不确定它是否是正确的答案,但它很简单且有效!):

var home = 'index.html';
history.pushState({page:home}, null, home);

希望这有帮助!

答案 4 :(得分:1)

我意识到这是一个老问题,但在尝试像这样轻松管理状态时,采取以下方法可能会更好:

$(window).on('popstate',function(e){
    var state = e.originalEvent.state;
    if(state != null){
        if(state.hasOwnProperty('window')){
            //callback on window
            window[state.window].call(window,state);
        }
    }
});

通过这种方式,您可以在添加到历史记录时在状态对象上指定可选的回调函数,然后在触发popstate时,将使用状态对象作为参数调用此函数。

function pushState(title,url,callback)
{
    var state = {
        Url : url,
        Title : title,
    };
    if(window[callback] && typeof window[callback] === 'function')
    {
        state.callback = callback;
    }
    history.pushState(state,state.Title,state.Url);
}

您可以轻松扩展它以满足您的需求。

答案 5 :(得分:-1)

最后说:

  

我认为浏览器很乐意退回到正常请求创建的条目。

我找到了一个奇怪的浏览器行为here的解释。解释是

  

您应该在第一次加载网站时保存状态,之后每次更改状态时保存状态

我测试了它 - 它有效。

这意味着无需基于window.location 加载您的内容。

我希望我不会误导。