Popstate：document.locations.href 给出了错误的网址

问题描述

我正在开发一个基于 ajax 的小型网站，例如 p1-club.de。所以有一个带有子页面链接的 OnePager。子页面通过ajax作为覆盖打开。我使用 jQuery $.load() 加载内容。 URL 通过 pushState 更新。到目前为止一切顺利。

var $sideContent = $(".side-wrapper-content-wrapper");

dynamicPage();

function dynamicPage(){
  $(".ajax-trigger").click(function(e){
    e.preventDefault();
    var _link = $(this).attr("href");
    history.pushState('','',_link)
    loadContent(_link);
    return false;
  });
}

$(".side-wrapper-close-button").click(function(){
  CloseSide();
  history.replaceState({},'/');
});

function loadContent(href){
  $("#side-wrapper").scrollTop(0);
  document.title = 'Loading...';
  $(".side-wrapper-content-wrapper").load(href + " .side-wrapper-content-wrapper",function(responseTxt,statusTxt,xhr){
  if(statusTxt == "success")
    OpenSide();
    document.title = $(responseTxt).filter("title").text();
    dynamicPage();
  if(statusTxt == "error")
    alert("Fail:" + link + xhr.statusText);
    });
    return null;
};


$(window).bind('popstate',function(){
    var newURL = document.location.href;
    if (newURL == 'https://example.com'){
     CloseSide();
   }
   else {
     history.pushState({},newURL)
     loadContent(newURL);
     OpenSide();
   }
});

function CloseSide(){
  ...
};

function OpenSide(){
 ...
};

当我打开页面并单击子页面链接时，一切正常。即使我单击浏览器中的后退按钮，覆盖图也会消失。当我点击第二个子页面链接时，覆盖层再次出现，内容正确，但是当我点击浏览器中的后退按钮时，没有任何反应，因为 document.location.href 给出了例如example.com/page3 返回，而不是 example.com。

我创建了一个小故事板，这有助于理解我的问题。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）