https://segmentfault.com/a/1190000002447556#articleHeader12

https://developer.mozilla.org/zh-CN/docs/Web/Events/hashchange

事件类型一栏表:https://developer.mozilla.org/zh-CN/docs/Web/Events

Hash

修改hash以及检测hash变化的两种方式:

<a href="#two">click to change hash two</a>
<button onclick="location.hash='a'+Math.random()">随机hash</button>
<script>
window.onhashchange = function(){
console.log(location.hash)
} window.addEventListener("hashchange",function(){
console.log(location.hash)
})
</script>

hash值会附在浏览器url地址的尾部,如www.xx.com?a=123#one。hash被修改之后,可以点击后退前进,回到修改前后的页面,hashchange事件会被触发,页面不会刷新。

ps:回顾事件绑定的规律,对于事件xx,有以下三种方式绑定

  1. dom.onxx = ...
  2. addEventlistener('xx',...)
  3. attachEvent('onxx',...)

History Api

使用pushState,可以实现修改浏览器的url,却不发送页面请求,页面没有刷新,点击后退按钮可以回到修改前的url,前进或者后退,页面都不会刷新(因为页面始终是同一个document,前进后退的过程会触发onpopstate事件),也不会有新的网络请求,给人的感觉就像是仅仅切换了url的显示一样。

而replaceState,仅仅是替换当前的url,除此之外没任何变化。

对于以下代码,页面第一次打开的时候,无输出,浏览器地址变为了index.html,此时点击后退,会打印pushState前的地址,点击前进,会打印index地址

<script>
history.pushState(null,"","http://localhost:8888/index.html")
window.onpopstate = function(){
console.log(location.href)
}
</script>

也就是说,仅当使用了pushState,然后点击前进或后退,这个事件才会被触发。

应用场景

  我希望把一个页面发给别人看,就把地址发了过去,但发现别人看的页面的状态和我现在的页面状态不一致。这种不一致的原因是,页面中使用了异步请求,而进行了多少次异步请求以及请求了什么,这些页面的状态并不能反映到url上面,所以把url发给别人,我页面的状态当然也就不能再别人那里重现了。

  解决的办法是把页面中的异步请求信息添加到url上,或者说异步请求的信息要与url进行同步,步骤如下:当第一次打开页面的时候,获取url,根据url中的信息进行异步请求,达到url与页面状态进行同步。当用户在页面上进行交互,触发了异步请求,完成后也要修改url,达到页面状态与url的同步。

  以上关键的地方就是修改url,但不能重新刷新,因为一刷新的话页面的状态又回到原点了,不是我们想要的。修改url就需要用到以上的hash 和 history api了,也可以添加query 参数(replaceState替换为原来的地址,只不过后面加上参数)

对比hash和history api。

  相同点:修改hash对应pushState,hashchange事件对应popstate事件,两者的行为表现一致:切换的时候页面不刷新,改变的时候会留下历史记录,可供用户前进或后退。

  不同点:history api 比 hash 多出来一个replaceState方法,以及修改后的url格式不同而已

History Api以及hash操作的更多相关文章

  1. History API与浏览器历史堆栈管理

    移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构.传统的单页应用基于url的hash值进行路由,这种实现不存在兼容性问题,但是缺点也有--针对不支持o ...

  2. HTML5学习笔记之History API

    这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美 ...

  3. 使用HTML5的History API

    HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的 ...

  4. 大熊君学习html5系列之------History API(SPA单页应用的必备------重构完结版)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  5. 大熊君学习html5系列之------History API(SPA单页应用的必备)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  6. 转: html5 history api详解~很好的文章

    从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...

  7. 浅析列表页请求优化(history API)

    最近搞了下列表页请求的功能,并做了一下调研整理,记此文备忘. 列表页请求的功能到处可见,比如在博客园. 点击相应的页码,页面返回相应的内容,看上去似乎大同小异,但是一些小的细节还是可以区分优劣. fu ...

  8. 有关html5的history api

    从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...

  9. HTML5 History API让ajax能回退到上一页

    HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的 ...

随机推荐

  1. [!] No `Podfile' found in the project directory.

    1.cd ios/ 2.vim Podfile(创建Podfile)且输入内容 source'https://github.com/CocoaPods/Specs.git'platform:ios,' ...

  2. 通过java调用Http接口上传图片到服务器

    https://blog.csdn.net/jaedons/article/details/78563841 /** * 测试上传png图片 * */ public static void testU ...

  3. python入门之生成器

    生成器 通过列表生成式,可以直接创建一个列表,但是,受到内存限制,列表容量肯定是有限得.而且,创建一个包含100万个元素的列表,不仅占用很大的存储空间,如果仅仅需要访问前面几个元素,那后面绝大多数元素 ...

  4. TI德州芯片TLV系列和TPS系列芯片区别(转)

    TLV和TPS一般会有pin to pin的对应型号: 一般来讲,TPS精度.准确度和性能会好一些,所以价钱要贵一些: 对应TLV就是一样可以实现上述功能,但是精度和性能等级是稍微低一点的: 具体选择 ...

  5. sql server 时间查询

    select CONVERT(varchar, getdate(),8 )   --获取当前时间时分14:13:59 select CONVERT(varchar, getdate(),23 )  - ...

  6. find搜索文件系统,实时搜索

    find搜索文件系统.实时搜索 find[目录][条件][动作] [目录] 不输入目录代表当前目录 find find /etc ----------------------------------- ...

  7. CSS-学习笔记四

    1.*用于匹配任何的标记 2.>用于指定父子节点关系 3.E+F毗邻元素选择器,匹配所以紧随E元素之后的同级元素F 4.E~F匹配所以E元素之后的同级元素F 5.名称[表达式] [att=val ...

  8. 聊聊C语言和ABAP

    这个公众号之前的文章,分享的都是Jerry和SAP成都研究院的同事在工作中学到的一些知识和感受.而今天这篇文章,写作的由来是因为最近我又参与了SAP成都数字创新空间应聘者的面试,和一些朋友聊了一些关于 ...

  9. 如何让Spring MVC显示自定义的404 Not Found页面

    不知道大家对千篇一律的404 Not Found的错误页面是否感到腻歪了?其实通过很简单的配置就能够让Spring MVC显示您自定义的404 Not Found错误页面. 在WEB-INF的web. ...

  10. 在Windows笔记本上调试运行在iOS设备上的前端应用

    我在每天工作中需要在不同的移动设备上测试我们开发的前端应用是否正常工作,比如iOS设备和Android设备.我用的工作笔记本电脑又是Lenovo的,安装的是Windows操作系统. 有的时候一个开发好 ...