如何让浏览器的“后退”按钮在我的单页网站上工作 链接

如何解决如何让浏览器的“后退”按钮在我的单页网站上工作 链接

我的 javascript 水平：初学者

我正在为我和一些朋友经营的广播电台建立一个网站。因为我们想要一个音频播放器可以在用户浏览网站时不间断地播放电台，所以我使用 javascript 将内容页面加载到播放器下方主页上的 #page-content div。

内容正在按预期加载，但我不知道我应该怎么做才能让浏览器的“后退”按钮按预期工作。现在，按“后退”会更改 URL，但它实际上并未加载上一页的内容。

这是我在 </body> 标记之前的脚本。我以首页、收听和日程页面为例：

function loadhome(cid) {   
  $('#page-content').load('/ #' + cid);
    window.history.pushState("html",null,"/");
}

function loadlisten(cid) {
  $('#page-content').load('listen #' + cid);
    window.history.pushState("html","/listen");
}

function loadschedule(cid) {
  $('#page-content').load('schedule #' + cid);
    window.history.pushState("html","/schedule");
}

...对于网站中的所有页面都是如此。

实际的主要导航链接如下所示：

<a href="javascript:loadhome('page-content');" 
    id="nav-home" class="nav-button w-nav-link">Home</a>

<a href="javascript:loadlisten('listen-content');" 
    id="nav-listen" class="nav-button w-nav-link">Listen</a>

<a href="javascript:loadschedule('schedule-content');" 
    id="nav-schedule" class="nav-button w-nav-link">Schedule</a>

...等所有主要导航链接。

我一直在尝试通过阅读 popstate 来自己解决这个问题，但我不明白。知道我需要做什么才能使浏览器的“后退”按钮按预期工作吗？

链接

这是一个 webflow 站点，但我使用自定义代码来完成所有这些，这似乎不是问题。显然我有问题，但我不认为这是 webflow 的问题。进行中的网站： https://daves-blank-site-96a22c.webflow.io/