推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
这是一个创建于 3364 天前的主题，其中的信息可能已经有所发展或是发生改变。
花瓣（ 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 吗？
有没有相关的库、文章可以学习？
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 吗？
有没有相关的库、文章可以学习？
 |
1
nowgoo 2015-09-06 17:16:44 +08:00
|
|
2
nowgoo 2015-09-06 17:19:02 +08:00  1
上面的链接挂了，关键词： html5 history api
|
 |
3
abelyao 2015-09-06 17:21:40 +08:00 1
基本就是楼上说的那样，大概的应用原理就是，点某个 item 的时候通过 AJAX 加载这个 item 的内容到列表页上，然后通过 window.history.pushState 改变当前地址栏显示的 url （实际上你还是停留在列表页）
|
 |
4
whahuzhihao 2015-09-06 17:21:59 +08:00
history 类似的还有 网易云音乐 WEB 版这种跳转不会中断播放 也是用的这种特性
|
 |
5
ChefIsAwesome 2015-09-06 17:23:09 +08:00
直接访问回页面， ajax 请求回数据。同一个数据要做两手准备，后端做起来挺麻烦的。
|
 |
6
fburst 2015-09-06 17:24:27 +08:00 1
|
 |
7
billdc 2015-09-06 17:31:39 +08:00 1
现在主流框架都支持,楼上说得没错,有一些是用 html5 history api.
pajax,react,angularjs 都支持,自己手动写比较麻烦,建议使用框架,这样对于不支持 html5 的浏览器,也能很好支持. |
|
8
ChefIsAwesome 2015-09-06 17:31:49 +08:00
@whahuzhihao 网易那个是用 hash 做路由的，跟花瓣的不一样。
|
 |
9
kalintw OP |
 |
10
NemoAlex 2015-09-06 17:48:08 +08:00 1
楼上说的没错， HTML History API 。并不是什么新鲜的东西了。
花瓣这个，具体的方案是用了 History.js ，会自动在不兼容的浏览器上使用 hash tag 来实现。 |
 |
11
learnshare 2015-09-06 17:51:59 +08:00
|
 |
13
monsun 2015-09-06 18:57:23 +08:00
@whahuzhihao 网易云音乐之类的跟这个不太相同, 播放控件是放在外层,内页全部用 iframe 加载. 以前干过这档子事..
|
 |
14
coffce404 2015-09-06 19:08:40 +08:00
利用 HTML5 History API ，以前封装过这样的库 https://github.com/Coffcer/coffce-pjax
在现代浏览器上使用 pushState ，在低版本浏览器上（ IE8, IE9 ）使用 hash ，对更低的 IE6~7 和不执行 js 的搜索引擎蜘蛛则保持默认跳转。 不过已经很久不维护啦 |
 |
15
ttph1oc 2015-09-06 19:45:14 +08:00
直接访问和当前页弹框应该是两套模板。但我个人是很憎恨这样搞的，因为我认为相同路由就应该给我相同的响应。正面例子是 Chrome 应用商店。
|
 |
16
loading 2015-09-06 19:49:12 +08:00 via iPhone
搜 pjax 就是你要的东西。
|
 |
17
malcolmyu 2015-09-07 11:47:17 +08:00
关键词 pjax
|
 |
18
2015813 2015-09-07 11:59:24 +08:00
相关内容 ajax
|
 |
19
keyanzhang 2015-09-07 14:38:19 +08:00 1
如果你用 React 的话，这份 react-router 的范例代码准确的实现了你的需求： https://github.com/rackt/react-router/blob/master/examples/pinterest/app.js
|
Select Language