Получение ошибок навигации с помощью Push State / Pop State - JavaScript Page Change

Question

Я создал сайт с одной HTML-страницей, где изменения страницы контролируются JavaScript, чтобы показывать / скрывать релевантные страницы при выборе. Я пытался заставить историю браузера запомнить состояние страницы, чтобы я мог использовать навигацию браузера для сайта, реализованного таким образом.

Я настроил программу для отправки состояния каждой посещенной страницы в историю браузера, а затем onpopstate вернуться к самому последнему состоянию в стеке истории. По какой-то причине кнопка "Назад" теперь работает в браузере, но она полностью несовместима. Иногда он возвращается на домашнюю страницу, а иногда - на страницу услуг. Кажется, я не могу точно понять, в чем проблема, которая его отбрасывает.

Моя страница 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';
}
};

Answer 1

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" );
    }
}
}

в ваших кодовых страницах есть объект. Поэтому, чтобы проверить название, вам нужно проверить его, как указано выше. Попробуйте это.