将浏览器历史记录和导航添加到 JavaScript DOM 页面更改功能

Question

我正在使用 JavaScript 来更改我网站的页面，但是我运行遇到了一个问题，我无法使用浏览器导航在历史记录中后退或前进已更改页面。

我已经尝试在每个页面的 URL 中添加 /#pagename 以及一些其他内容，但我似乎无法找到有效的方法。我需要能够确保浏览器保存我所做的页面更改的历史记录，以便它可以使用前进和后退按钮导航这些页面。

// Change Page Function

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.scrollTo(0,0);
    }
}

//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.scrollTo(0,0);
    }
}
}

Answer 1

您应该查看 window.history.pushState to add history entries and window.onpopstate 以对浏览 "backward" 您添加的条目的用户做出反应。

当您想要 "change" 页时，请拨打以下电话：

window.history.pushState( stateData, title, url );

其中...

stateData 是一些包含您定义的数据的对象
title 是新状态的字符串名称
url是浏览器的url应该改成的字符串

例如，如果您想更改为 "servicespage" 并将 url 更改为“/#services”：

window.history.pushState( { title: "Services" }, "servicespage", "/#services" );

请注意，此时您仍然需要操作 DOM。

然后，如果您想对用户回溯历史做出反应：

window.onpopstate = function( event ) {
  var data = event.state;

  // data references the first argument of 'pushState'
  // do whatever showing or hiding of <div>s here
};

将浏览器历史记录和导航添加到 JavaScript DOM 页面更改功能

Adding Browser History and Navigation To JavaScript DOM Page Change Function

html

javascript

dom

browser-history