时间戳

首页 > 解决方案 > 历史 pushstate 后退和前进功能

javascript - 历史 pushstate 后退和前进功能

问题描述

我刚刚创建了一个网站，所有页面都使用 ajax 加载。现在我正在尝试使后退和前进浏览器按钮工作。后退按钮很简单，我所要做的就是：

$(window).on('popstate', function(e) {
    get_page_content(location.href);
});

get_page_content()单击链接时我用来获取和替换页面内容的功能在哪里。这就是我在里面使用 pushstate 的方式get_page_content()：

window.history.pushState('', '', url);

他们的问题是每当我返回时，前进按钮不可用。如何使用前进按钮？

标签： javascriptajaxwordpressbrowser-historypushstate

解决方案

我刚刚意识到我在window.history.pushState('', '', url);里面get_page_content()，然后每次onpopstate触发事件时都会调用它，最终没有什么可继续的。我只是搬到pushState外面，get_page_content()一切正常。这是我目前拥有的：

$('body').on('click', 'a:not([href^="#"])', function(e) {

  if ( this.host === window.location.host ) {

    e.preventDefault()

    get_page_content($(this).attr('href'));
    window.history.pushState('', '', url);

  }

});

$(window).on('popstate', function(e) {

    get_page_content(location.href);

});

function get_page_content(url) {
  // ...
}

推荐阅读