博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5 修改浏览器url而不刷新页面
阅读量:6242 次
发布时间:2019-06-22

本文共 990 字,大约阅读时间需要 3 分钟。

嘛,起因是黑子大叔在微博上的一条@信息,找起了这个的实现,看了一圈google的中文信息内似乎还没有怎么提到这个的内容,就发表上来。

详细效果就是类似于用Firefox4+/Chrome 5+/Safari 5+/Opera 11.5+登录新浪微博后看到的个人时间轴,在翻页时可以观察到这个效果,地址栏URL变动,但是页面没有刷新,用firebug观察也观察不到刷新整个页面,只有ajax请求的翻页数据。从先前的理解来说,URL的修改必然引起(请注意我不是在说通过锚点修改)浏览器重载页面,但利用HTML5新加入的history.pushState();history.replaceState();可以完全自己维护一个历史记录列表绕开历史记录完全由浏览器控制的机制,从而实现比锚点更加完美的一种页内更新的体验。

代码方面很简单,只要在需要修改url的地方插入一行:

window.history.pushState({"html":response.html,"pageTitle":response.pageTitle}, 'title', urlPath);//三个参数,分别为:状态对象,标题(目前被浏览器忽略),地址

即可在历史记录里面产生一个新的历史记录(另一个replaceState方法参数完全相同,只是替代掉当前的状态)。

在体验上,非常接近于使用锚点(window.location = “#foo”;),但是mozilla的文档提出了以下三点好处:

  • 新的URL可以是和原始页面URL同域下的任何URL,如果用锚点,只能更新#后面的部分
  • 仅在需要时更新URL,锚点的历史记录在相同时不会创建(即当前已经是”#foo”的情况下,如果再将当前页面锚点设置为”#foo”,不会产生新的历史记录)
  • 可以记录下任意类型的数据,使用锚点的话将要自己维护一份历史数据列表或者把数据转码到一个字符串里

(翻译&描述的有点别扭,见笑了,不过其实应该自己也能体会到这些好处才是)

我自己实现的一个例子:

 

代码:

HTML5 修改浏览器url而不刷新页面

mozilla的文档

stackoverflow上的相关问题:

 

转载地址:http://jrwia.baihongyu.com/

你可能感兴趣的文章
vue源码分析系列之响应式数据(三)
查看>>
Nginx服务系列——负载均衡
查看>>
力扣(LeetCode)21
查看>>
flac格式歌曲如何转换成mp3格式,flac转mp3详细图文教程
查看>>
微服务应用新趋势:Service Mesh、AIOps和中台化
查看>>
执行计划小总结
查看>>
再一次深入了解react的生命周期
查看>>
Python基本数据类型之列表
查看>>
Canvas 文本转粒子效果
查看>>
JDBC
查看>>
优化体系结构 - 解决多样性数据源
查看>>
Vue中data和computed的区别
查看>>
心如止水•精读:『批判性思维』- 让讨论持续进行的七大方法
查看>>
区块链信任机制都有哪些“?
查看>>
css居中总结
查看>>
Vagrant (二) - 日常操作
查看>>
上线清单 —— 20 个 Laravel 应用性能优化项
查看>>
深入解读MySQL8.0 新特性 :Crash Safe DDL
查看>>
Fundebug前端JavaScript插件更新至1.6.0,新增test()方法用于测试
查看>>
如何使用视频剪辑软件将qsv格式视频转换为MP4格式
查看>>