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. DB2 - 编目的解释

    编目(Catalog),是在本地或远程建立客户端到服务器的数据库连接的过程.其目的在于获取编目信息,即生成用来访问数据库的目录.系统数据库目录包含一个列表和指针,通过目录可以使 DB2 能够找到已知的 ...

  2. nginx+vue实现项目动静分离

    一般的企业都会采用前后端分离的方式来开发.部署项目,这样做的好处是更好的让前后台各司其职.另外也由于nginx是一个轻量级的静态资源服务器,其高并发也是其优点之一.这样可以减轻双方服务器的压力,同时又 ...

  3. Zynq7000开发系列-4(新:Xilinx交叉编译环境搭建)

    一.前言  本来上一篇文章已经讲了Xilinx交叉编译环境的搭建,但是我在后续的使用中发现:使用2011年版本的交叉编译链编译OpenCV 3.1.0时出现错误: 网络搜索一番,查明是交叉编译链的问题 ...

  4. JS 两个数组合并

    让我们先考虑下面这情况: 代码如下: var a = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];var b = [ "foo", "bar", ...

  5. 292. Nim游戏

    292. Nim游戏 class Solution(object): def canWinNim(self, n): """ :type n: int :rtype: b ...

  6. python虚拟环境四

    python虚拟环境管理器 我们在使用python虚拟环境的时候,最好安装一个虚拟环境管理器,这样我们就能很方便的管理python的 虚拟环境,而python的虚拟环境管理工具包就是virtualen ...

  7. GYM 101673E(暴搜预处理)

    1.不会超过500个不同的串-- 2.样例没给has到has是怎么样的,实测是true. 3.记忆化别剪错枝就好,嘤嘤嘤-- const int maxn = 505 + 5; int n, m, t ...

  8. python入门之递归

    表现形式: 函数体里包含执行本身 def f1(): r = f1() f1() 实例: 斐波那契数 (a1+a2=a3   a2+a3=a4   a3+a4=a5   ......) def f1( ...

  9. arcgis jsapi接口入门系列(8):鼠标在地图画面

    初始化,每个map执行一次 PS:画点也差不多,都是用SketchViewModel,因此本demo没有专门写画点的 drawPolygonInit: function () { //画几何对象初始化 ...

  10. 进程间通信,把字符串指针作为参数通过SendMessage传递给另一个进程,不起作用

    参数发送进程: CString csCmd=AfxGetApp()->m_lpCmdLine; if (!csCmd.IsEmpty()) { pWndPrev->SendMessage( ...