恐怕我必须从整个背景故事开始，因为这里的旅程才是重点，而不是主题。
不久前，一个小伙子写信给我，概述了他所处的情况。他的公司有很多公共广播电台的 WordPress 网站，其中许多本质上是播客之家。他认为有一个特定的功能对他们来说都是理想的：拥有一个“固定”音频播放器。就像您可以播放播客，然后继续在网站上导航一样，而播客不会停止。
这在 WordPress 中实现起来有点棘手，因为 WordPress 会像任何其他常规网站一样重新加载整个页面，不会对链接处理或历史记录进行任何特殊处理。当页面重新加载时，页面上的所有音频都会停止播放。这就是网络的运作方式。
那么如何在 WordPress 网站上实现这一目标呢？好吧，您可以将其设为无头 WordPress 网站，并将整个前端重建为单页应用程序。对我来说听起来很有趣，但我会犹豫是否要打电话 只是 这 一种 事情。
你还能做什么？您可以找到一种方法使页面永远不会重新加载。我记得这样做是在 10年前的一个小静态网站，但这并不是一个完整的 WordPress 网站，当时我什至没有费心去更新 URL。
如果你这样做怎么办...
- 拦截内部链接点击
- Ajax 处理来自该 URL 的内容
- 将页面上的内容替换为新内容
我将用 jQuery 快速为您完成此操作：
$("a").on("click", () => { const url = $(this).attr("href"); $.get(url + " main", (data) => { $("main").html(data); history.pushState({}, "", url); });
});这离真正的功能性已经不远了。你想关注 a popstate 活动 处理后退按钮，但这只是几行。
在这个假设的世界中，您可以将网站布局如下：
<html>
<!-- ... --> <body> <main></main> <audio src="" controls ...></audio>
</body>
</html>所以这一切 <main> 内容被换出，URL 发生变化，但您的 <audio> 玩家可以独自一人继续安静地玩游戏。您需要编写更多 JavaScript 来为人们提供更新播客正在播放的内容等的方法。
事实证明，这里还有更多值得思考的地方。内容上是否会运行任何内联脚本？更新一下怎么样 <title> 也？有足够多的边缘问题，你可能会在处理它时感到恼火。
我想尝试一下这个东西，所以我拼凑了一个 WordPress 主题并找到了 涡轮 而不是手写一些东西。 Turbo（Turbolinks的新版本）就是为此而设计的。这是一个 JavaScript 库，您可以将其放在页面上（无需构建过程，无需配置），然后它就可以正常工作。它拦截内部链接点击、Ajax 获取新内容等。但它有一个有趣的功能，如果您将 data-turbo-permanent HTML 元素上的属性，它将在重新加载期间保留它。所以我 在这里为音频播放器做了这个.
但事情是这样的。
我只是没有时间好好完成这个项目。玩起来很有趣，但我对它的兴趣已经逐渐消失了。所以我现在先不管它：
It 几乎 可以工作，减去一个明显的错误，即音频在第一次导航时停止播放，然后再工作。我确信它是可以修复的，但我对这个游戏没有太多兴趣。我想我会退出并将此代码留下来供其他人使用（如果它对他们有用的话）。
这里起作用的另一件事是 Turbo 来自 Basecamp，而 Basecamp 有 相当内爆 最近使用他们的软件感觉不太好。萨姆·斯蒂芬森 (Sam Stephenson) 的事实加剧了这一情况 写了 Turbo 的 75% 并表示他不会接触它（或其他相关项目），除非该软件被转移到自己的基金会。 Turbo 已经处于摇摇欲坠的境地，因为它看起来 越野车 与 Turbolinks 相比，现在是 非常 粗糙的地面。
