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. 基于java开发的在线题库系统tamguo

    简介 探果网(简称tamguo)是基于java开发的在线题库系统,包括 在线访问 后台运营 会员中心 书籍中心 管理员账号:system 密码:123456 因为线上数据和测试数据没有做到隔离,作者已 ...

  2. SVN有任何胜过git的地方吗?

    SVN有任何胜过git的地方吗? 好的技术问题通常会引出技术专家们依据经验得出的深层次的观点.但对于这样的问题的答案也很容易演变成完全基于个人喜好的情绪倾泄,而不是根据事实.标准和具体的专业知识.就比 ...

  3. redis 的操作

    redis Redis(Remote Dictionary Server)是一个开源使用的非关系型数据库 通常被称为数据结构服务器,因为值可以是字符串,哈希,列表,集合,有序集合 优势 ​ 性能极高, ...

  4. bzoj2806 [Apio2012]dispatching【可并堆】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2809 保存可并堆模版代码. #include <cstdio> #include ...

  5. 502的错误其实不是nginx的问题,要从后端找原因。php-cgi进程数不够用、php执行时间长、或者是php-cgi进程死掉,都会出现502错误。

    502的错误其实不是nginx的问题,要从后端找原因.php-cgi进程数不够用.php执行时间长.或者是php-cgi进程死掉,都会出现502错误.

  6. python入门之装饰器

    入门原理: 一系列函数要做相同的修改,在这些函数执行之前做的操作,或者在执行之后做的操作都可以在一个装饰器(函数)里修改 作用: 在不改变原函数的情况下,对原函数的操作前或者操作后做些改变,这就是装饰 ...

  7. Redis特点

    内存存储,速度极快. 支持的数据类型多,相比较其他的Nosql. 键:字符串 值的六种数据结构:字符串,列表,散列,集合,有序集合,HyperLogLog 附加功能强大

  8. xml和TreeView

    1.TreeView代码代码: private void Form1_Load(object sender, EventArgs e) {<br> //代码为TreeView添加子项 tr ...

  9. 海德汉S3078长度计

    手头有一款海德汉S3078的增量式长度计. 图三为长度计引出线缆的针脚编号,其中,Up和传感器Up短路,0V与传感器0V短路,其他为输出信号线缆.时序如图: Ua1和Ua2两个信号的相位,可以得出长度 ...

  10. kickstart_2018_round_H_C Let Me Count The Ways

    思路: 容斥. 实现: #include <bits/stdc++.h> using namespace std; typedef long long ll; ; ; ll f[MAXN ...