jQuery、AJAX：使页面的一部分 ( <div> ) 在网站导航上不刷新

Question

我有一个包含歌曲的网站，底部还有一个 .mp3 播放器。

当您单击一首歌曲时，播放器开始播放该歌曲，但是当您尝试导航到该网站并假设单击专辑时，您自然会被重定向到www.mysite.com/?album=test，因此歌曲将停止播放.

我试图让播放器（基本上是播放器所在的<div>）没有重新加载，每次我点击<a href> 或button。为了清楚起见，您可以查看 https://soundcloud.com/ 示例。这就是我希望我的网站的行为方式。

现在，如果我在每个<a href> 上使用 jQueries，页面的 URL 将保持不变。这是我不想发生的。我还听说 iframe 是一个糟糕的解决方案。那么，https://soundcloud.com/ 和类似网站如何实现我想要做的事情？有人知道怎么做吗？

Answer 1

我看到 SoundCloud 的工作方式是使用 AJAX（是的，您可以使用 jQuery 来做到这一点）。所以你在技术上保持在同一页面上。关于“相同的 URL”，您实际上可以使用 History API 来操作浏览器的历史记录和 URL。

所以每次导航，你的 JS 应该通过操纵历史来模拟离开到另一个页面，让浏览器认为它离开了页面。 JS 的另一位跟踪 url，称为路由器，以知道在观察到某个 url 模式时要做什么。例如，如果我在路由/artists/foo，那么页面应该在艺术家“foo”的数据中进行 AJAX。