使用Push State/Pop State获取导航错误-JavaScript页面更改

我建立了一个单一的HTML页面网站，页面更改由JavaScript控制，以在选中时显示/隐藏相关页面。我一直试图让浏览器历史记录记住页面的状态，这样我就可以使用浏览器导航来实现这样的站点

我已设置程序，将访问的每个页面的状态推送到浏览器历史记录中，然后

onpopstate

返回到历史记录堆栈中的最新状态。出于某种原因，“后退”按钮现在可以在浏览器中工作，但它完全不一致。有时它会返回主页，有时会返回服务页面。我似乎搞不清楚到底是什么问题导致了这种情况

My JavaScript页面更改和填充状态函数：

function ChangeContent (page) {

var pages={"homepage":{title: "homepage"},"servicespage":{title: "servicespage"}};

//Show home page
for(var homepage in pages) {     
    if(page!==homepage) {      
        document.getElementById(homepage).style.display='none';
    }  
    else {      
        document.getElementById(homepage).style.display='block';
        window.history.pushState( { title: "EcoQuiet - Gasoline-Free Electric Lawn Care" }, "homepage", "/#home" );
    }
}

//Show services page
for(var servicespage in pages) {       
    if(page!==servicespage) {
        document.getElementById(servicespage).style.display='none';
    }

    else {    
        document.getElementById(servicespage).style.display='block';
        window.history.pushState( { title: "EcoQuiet - Our Services" }, "servicespage", "/#services" );
    }
}
}

我为

onpopstate

提供的函数如下：

window.onpopstate = function (event) {

var state = event.state.title;
var homepage = "EcoQuiet - Gasoline-Free Electric Lawn Care";
var servicespage = "EcoQuiet - Our Services";

// Change History State Display To Home Page
if (state === homepage && document.readyState === "complete") {
    document.getElementById("homepage").style.display = 'block';
} else {
    document.getElementById("homepage").style.display = 'none';
}

// Change History State Display To Services Page
if (state === servicespage && document.readyState === "complete") {
    document.getElementById("servicespage").style.display = 'block';
} else {
    document.getElementById("servicespage").style.display = 'none';
}
};

---

在代码页中是一个对象。因此，要检查标题，您需要如上所述进行检查。试试看。

My page change（我的页面更改）功能工作正常，只是

onpopstate

部分出现问题。您将显示设置为块，但应首先将当前页面的显示设置为无。然后阻塞上一页。

function ChangeContent (page) {

var pages={homepage:{title: "homepage"},servicespage:{title: "servicespage"}};

//Show home page
for(var homepage in pages) {     
    if(page!==homepage.title) {      
        document.getElementById(homepage).style.display='none';
    }  
    else {      
        document.getElementById(homepage).style.display='block';
        window.history.pushState( { title: "EcoQuiet - Gasoline-Free Electric Lawn Care" }, "homepage", "/#home" );
    }
}

//Show services page
for(var servicespage in pages) {       
    if(page!==servicespage.title) {
        document.getElementById(servicespage).style.display='none';
    }

    else {    
        document.getElementById(servicespage).style.display='block';
        window.history.pushState( { title: "EcoQuiet - Our Services" }, "servicespage", "/#services" );
    }
}
}