开发者社区 问答 正文

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

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

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

展开
收起
杨冬芳 2016-06-16 14:34:22 2976 分享
分享
版权
举报
1 条回答
写回答
取消 提交回答
  • IT从业

    你可以去了解下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_...

    2019-07-17 19:40:51 举报
    赞同 评论

    评论

    全部评论 (0)

    登录后可评论
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等