jQuery，AJAX：在网站导航中不刷新页面（）的一部分

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

当您点击一首歌时，播放器开始播放该歌曲，但当您尝试导航到该网站并让我们说点击一个专辑时，您自然会被重定向到www.mysite.com/?album=test ，因此，歌会停止播放。

每次点击或button ，我都试图让播放器（基本上是播放器所在的

）没有重新加载。 为清楚起见，您可以查看https://soundcloud.com/ 。 这就是我希望我的网站表现得像的方式。

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

Answer 1

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

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