网易云音乐播放器不受页面跳转影响是怎么做到的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3996 天前的主题，其中的信息可能已经有所发展或是发生改变。

跳转

播放器

页面

6 条回复 • 1970-01-01 08:00:00 +08:00

ccbikai

2013-12-07 23:33:17 +08:00

http://www.ruanyifeng.com/blog/2013/07/how_to_make_search_engines_find_ajax_content.html

sodatea

2013-12-08 02:14:32 +08:00

一般而言用 pjax (history.pushState + ajax load, GitHub 就用了这个技术) 可以做到这样的效果. jQuery 有个 pjax 插件（https://github.com/defunkt/jquery-pjax）可以用.
但是至于网易云音乐……你看一下他的源代码就知道了, 除了播放器都是放在 iframe 里的, 地址部分是通过改变 fragment identifier (# 后的一串字符) 实现的，看了一下代码, http://s3.music.126.net/s/2/pt_index.js 这里也有用到 history.pushState 来保证历史记录能正常使用

kevinzhow

2013-12-08 02:21:22 +08:00

@sodatea 我猜是放iframe里的~

Air_Mu

2013-12-08 02:31:37 +08:00

抄袭Soundcloud的。

ccbikai

2013-12-08 08:48:19 +08:00 via Android

@Air_Mu 抄袭还算不上，用了相同的技术而已吧

kongruxi

2013-12-08 10:19:44 +08:00

如果一开始用像 Angular 或者 Ember 这些 Single Page Application 的框架，就不必用 iframe 这么奇怪的东西，更不用像虾米那样要在新窗口打开，看看这里 https://hepaimusic.com