如何让js函数在不同的页面之间运行？

Question

我想知道像SoundCloud这样的网站是如何工作的：你播放一首歌，即使你不停地移动到另一个页面，它也会继续播放 有什么建议吗？

Answer 1

我能想到的唯一方法是将您的应用程序或至少其中需要连续的部分构建为单个页面。

实际上，这意味着只加载了一个HTML文档。例如，当按下链接时，浏览器操作被拦截并被阻止，浏览器行为被javascript伪造。

考虑一个由A和B组成的网站。通常，当激活指向B的链接时，URL会被更改，浏览器会调用服务器，请求B.但是，在单页应用程序中，这会被中断通过javascript函数，它使用History API更改URL，然后以不需要从服务器同步提取新文档的方式显示B.

Answer 2

有几种方法可以做到。

导航到新页面

如果这样做，将为新页面创建一个全新的JS执行上下文，因此您无法保持该功能的运行。然而，你可以做的是＆＃34;恢复＆＃34;在新页面中执行。为此，您需要在服务器上或在页面更改（cookie，localStorage等）之间保留的某些客户端存储中保存旧页面的状态。

假导航

这是最友好的用户方式 - 您将网站转变为网络应用程序。您不再拥有多个页面，因此当用户想要更改他在浏览器中看到的内容时（例如转到新歌曲），应用程序只需使用所需内容更改相应的区域即可。这是一个复杂的主题，应该可以自己研究，而不是在SO答案中解释。继续google＆＃34;单页应用＆＃34;你应该找到足够的资源。

Answer 3

从技术上讲，当您使用souncloud时，您永远不会更改页面。您始终保持在同一页面上，只有部分会发生变化而实际发生变化，因此您永远不会重新加载整个页面。这就是他们可以保持音乐播放的原因：他们永远不会移除或改变实际的播放器。如果您想知道如果您永远不离开页面，浏览器中的网址会发生变化的原因是：他们操纵您的history entries。 如果您有兴趣创建行为相似的应用程序，则应该检查Ember.js或Angular.js等框架。 TodoMVC对这些框架进行了很好的概述。