花瓣网这种 Route 是如何做的

[kalintw]

花瓣（ Pinterest ）这种风格的 route ：

1. 在主页或者瀑布流列表页，点击单个 item
1.1 地址栏变成单个 pin 的 url ，比如： http://huaban.com/pins/469222884 ，注意，此时页面并没有刷新;
1.2 单个 pin 的内容是以 modal 的形式弹出来，覆盖在原来的瀑布流列表页上面，瀑布流列表页并没有remove；
1.3 关闭 modal 单页，地址栏变回列表页 url

2. 直接访问单个 item
比如还是那个单个 pin 的 url ： http://huaban.com/pins/469222884, 直接是内容页。


请教前端的朋友，这种效果大概是怎么做的？是什么单独的技术，或者 best practice 吗？
有没有相关的库、文章可以学习？

[nowgoo]

http://www.w3.org/TR/html5/history.html

[nowgoo]

上面的链接挂了，关键词： html5 history api

[abelyao]

基本就是楼上说的那样，大概的应用原理就是，点某个 item 的时候通过 AJAX 加载这个 item 的内容到列表页上，然后通过 window.history.pushState 改变当前地址栏显示的 url （实际上你还是停留在列表页）

[whahuzhihao]

history 类似的还有 网易云音乐 WEB 版这种跳转不会中断播放 也是用的这种特性

[ChefIsAwesome]

直接访问回页面， ajax 请求回数据。同一个数据要做两手准备，后端做起来挺麻烦的。

[fburst]

https://github.com/defunkt/jquery-pjax

[billdc]

现在主流框架都支持,楼上说得没错,有一些是用 html5 history api.
pajax,react,angularjs 都支持,自己手动写比较麻烦,建议使用框架,这样对于不支持 html5 的浏览器,也能很好支持.

[ChefIsAwesome]

@whahuzhihao 网易那个是用 hash 做路由的，跟花瓣的不一样。

[kalintw]

@whahuzhihao
@nowgoo
@abelyao
@ChefIsAwesome
@fburst
@billdc

知道方向就好找资料了，多谢各位回复！

[NemoAlex]

楼上说的没错， HTML History API 。并不是什么新鲜的东西了。
花瓣这个，具体的方案是用了 History.js ，会自动在不兼容的浏览器上使用 hash tag 来实现。

[learnshare]

@whahuzhihao
@ChefIsAwesome
网易云音乐内嵌一个 iframe ， URL 控制刷新 iframe 里的页面

[kalintw]

@NemoAlex 多谢！

[monsun]

@whahuzhihao 网易云音乐之类的跟这个不太相同, 播放控件是放在外层,内页全部用 iframe 加载. 以前干过这档子事..

[coffce404]

利用 HTML5 History API ，以前封装过这样的库 https://github.com/Coffcer/coffce-pjax
在现代浏览器上使用 pushState ，在低版本浏览器上（ IE8, IE9 ）使用 hash ，对更低的 IE6~7 和不执行 js 的搜索引擎蜘蛛则保持默认跳转。
不过已经很久不维护啦

[ttph1oc]

直接访问和当前页弹框应该是两套模板。但我个人是很憎恨这样搞的，因为我认为相同路由就应该给我相同的响应。正面例子是 Chrome 应用商店。

[loading]

搜 pjax 就是你要的东西。

[malcolmyu]

关键词 pjax

[2015813]

相关内容 ajax

[keyanzhang]

如果你用 React 的话，这份 react-router 的范例代码准确的实现了你的需求： https://github.com/rackt/react-router/blob/master/examples/pinterest/app.js