javascript - 花瓣网里面，点击每个图片之后url有改变，但是没有刷新页面，原来页面的dom也都还在，请问这是怎么做到的？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 花瓣网里面，点击每个图片之后url有改变，但是没有刷新页面，原来页面的dom也都还在，请问这是怎么做到的？

怪我咯 2017-04-10 15:06:29

[JavaScript讨论组]

1016

http://huaban.com/boards/19874332/ 比如这个页面，点击里面的图片，会弹出一个p层来显示这张图片，如果用ajax来做很正常，但是神奇的是，它页面的url是改变了的，而且原来页面的dom也都还在，所以返回原页面速度很快，如果复制这个url到新的页面访问，访问的是单独显示这张图片的页面。

我只知道给url添加锚链接不会重新刷新页面，但是这个不是添加锚链接，而是路由路径都变了，怎么就不会重刷页面呢？

怪我咯

走同样的路，发现不同的人生

全部回复(2)

天蓬老师2017-04-10 15:08:29 2楼

你可以去了解下html5的history的API，这里主要用到了pushState
拿第一张喵星人图来讲,点击图片后，除了修改一下dom外，并做如下处理

var title = '别打110，我选择的路，我会义无反顾的走...@抱抱兔采集到【沉默的朋友】(339图)_花瓣';
var url = 'http://huaban.com/pins/362226000/'
var state = {title:title,url:url}
history.pushState(state,title,url)//改变url

参考这个：https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_...