Question

我使用了pace.js，但问题是pace，加载动画是在页面完全加载后显示的。

所以，我尝试并制定了一个解决方案，点击页面上的每个链接，jquery抓取并停止从浏览器直接转到链接的事件，并向该链接发送ajax get请求。页面加载时，它会在当前页面上显示动画。页面完全加载后，它将用接收的数据替换整个当前文档，并替换地址栏中的页面URL。

    <script type="text/javascript">
    $( document ).ready(function() {
     $('a').click(function() {
            var dt;
            if (/#/.test(this.href)) {
                return true;
            }else{
                document.getElementById("before-loader").style.display= "block";//show loading animation
            var that = this;
            $.ajax({
                  type: "GET",
                  url: that.href,
                  success: function(response){
                    document.open();
                    document.write(response);
                    document.title = response.pageTitle;
                    window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", that.href);
                document.close();
                  },
                  error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus + ' ' + errorThrown);
                    document.getElementById("before-loader").style.display= "none";//hide loading animation
                  }
                });
            return false;
          }
      });
    });
    </script>

问题在于单击浏览器后退按钮，地址栏中的URL正在更改，但页面内容仍保持不变。我怎样才能克服这个问题？

更新

se0kjun的答案并没有解决我的问题（我希望在复制/粘贴所提供的代码后能够正常工作）但是让我朝着正确的方向前进。经过一些研究并重写了流程，它可以工作，但我仍然感到困惑，为什么它有效。

$( document ).ready(function() {
 $('a').click(function() {
        if (/#/.test(this.href)) {
            return true;
        }else{
      window.history.pushState(null, 'Production Workflow & Sales Management', this.href);
            loadContent(this.href);
        return false;
      }
  });
});


function loadContent(href) {
  document.getElementById("before-loader").style.display= "block";
  $.ajax({
    type: "GET",
    url: href,
    success: function(response){
      document.open();
      document.title = response.pageTitle;
      document.write(response);
      document.close();
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
      alert(textStatus + ' ' + errorThrown);
      document.getElementById("before-loader").style.display= "none";
    }
  });
}


window.onpopstate =  function(event) {
  link = location.pathname.replace(/^.*[\\/]/, ""); // get filename only
  loadContent(link);
};

也许我应该多学习。

Answer 1

我想你想popstate事件。

单击链接时，向that.href发送ajax请求。之后，如果请求成功，您将收到回复并致电pushstate。

单击后退按钮时，会触发popstate事件。您可以在popstate事件处理程序中加载上一页。

关注popstate

的使用示例

window.onpopstate =  function(event) {
  //you add a path in pushstate
  $('.container').load(event.state.path);
  alert('popstate');
};

这里是fiddle

用js设置页面内容和页面内容

1 个答案: