javascript - 如何使浏览器“后退”按钮在我的单页网站上工作

Question

我的 javascript 级别：初学者

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

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

</body>这是我在标签之前的脚本。我以 home、listen 和 schedule 页面为例：

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

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

function loadschedule(cid) {
  $('#page-content').load('schedule #' + cid);
    window.history.pushState("html", null, "/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/

标签： javascriptsingle-page-applicationback