hash 要点：

1、不会向后台发请求；#是用来指导浏览器动作的，对服务器端完全无用。

2、用来跳转到页面的指定位置:   为网页位置指定标识符，有两个方法。一是使用锚点，比如<a name="print"></a>，二是使用id属性，比如<div id="print" >。

btn.onclick = function(){

 window.location.hash = 'contDEF';

}

//HTML中

<div id="contABC" style="width: 70px; border: 5px solid red; height: 500px;"></div>

<div id="contDEF" style="width: 70px; border: 5px solid red; height: 300px;"></div>

3、hash改变，会产生一条历史记录。

4、改变#不触发网页重载，(第一条，不会发送请求！只是客户端，因此也不重载)

5、会触发onhashchange事件， 使用方法有以下几种：

 window.onhashchange = render

 window.addEventListener("hashchange", render, false);

<body onhashchange="func();">

PushState等

1、pushState是添加一条历史记录，添加完后，可以使用history.state 读取；

2、pushState和replaceState接受参数一样，({js对象}， title, url ) 其中title，浏览器不怎么支持，一般设为null， url是可选的。

history.pushState({'abc':abc}, null, `#/${abc}/${def}`);  //通过设置url改变了hash的值，也可以改变search, 
这样的话，url就改变了，因此，可以通过这种方式，在url中保存一些信息。

hash 和pushState，replaceState的更多相关文章

  1. [Web] HTML5新特性history pushState/replaceState解决浏览器刷新缓存

    转载: https://www.jianshu.com/p/cf63a1fabc86 现实开发中,例如‘商品列表页’跳转‘商品详情页’,返回时,不重新加载刷新页面,并且滚动到原来的位置. 1.首先,先 ...

  2. history对象 back() forward() go() 和pushState() replaceState()

    History(Window.history对象)对象保存着用户上网的历史记录.处于安全方面的考虑,开发人员无法得知用户浏览过的URL,但是借由用户访问过的页面列表,同样可以在不知道实际URL的情况下 ...

  3. HTML5无刷新修改Url,history pushState/replaceState

    一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...

  4. js pjax 和window.history.pushState,replaceState

    原文:http://blog.linjunhalida.com/blog/pjax/ github:https://github.com/defunkt/jquery-pjax 什么是pjax? 现在 ...

  5. ajax与HTML5 history pushState/replaceState实例

    一.本文就是个实例展示 三点: 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗 跟搜索引擎搞基 自己备忘 精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付.贷款和 ...

  6. HTML5 API——无刷新更新地址 history.pushState/replaceState 方法

    尽 管是上面讲到的<JavaScript高级程序设计>(第二版)中提到,BOM中的location.path/query…… (window.location)在通过JavaScript更 ...

  7. 【转】HTML5 API——无刷新更新地址 history.pushState/replaceState 方法

    (window.location)在通过JavaScript更改以后,浏览器都会通过刷新来到达你更改后的URL(location的意思就是位 置..) 而在JavaScript MVC开始流行之后,通 ...

  8. HTML5 API—无刷新更新地址 history.pushState/replaceState方法(例子） (转)

    尽管是上面讲到的<JavaScript高级程序设计>(第二版)中提到,BOM中的location.path/query…… (window.location)在通过JavaScript更改 ...

  9. 异步刷新页面的前进与后退的实现--pushState replaceState

    实现目标 页面的跳转(前进后退,点击等)不重新请求页面 页面URL与页面展现内容一致(符合人们对传统网页的认识) 在不支持的浏览器下降级成传统网页的方式 使用到的API history.state 当 ...

随机推荐

  1. HNOI2019退役记

    退役 警告. 今年虽然我没有变强, 但是还是比去年强一点(去年树形dp都不会). Day0 明天就是省选了,晚上22:13还没有睡觉,真的是状态不好. 打了一下LCT的板子,发现终于理解了...(这叫 ...

  2. 如何推翻JAVA的统治地位？

    “java越来越过份了.”php狠狠的说,他转头看着C:“C哥,您可是前辈,java最近砸了我不少场子,您老再不出来管管,我怕他眼里就没有您了啊.” C哥吸烟,慢慢的说:“年轻人不要着急,java的根 ...

  3. C#zip压缩类

    改造了网上的代码,可以压缩文件夹.指定文件列表(文件和文件夹的混合列表,需要指定子文件夹下需要压缩的文件),注释很详细不做解释 public class ZipHelper { /// <sum ...

  4. 使用HttpClient发送Get/Post请求 你get了吗？

    HttpClient 是Apache Jakarta Common 下的子项目,可以用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支持 HTTP 协议最新的版本和建议 ...

  5. Event Loop浅谈

    event loop 即事件循环.最初了解到js的event loop机制是通过自己对js中异步.同步的疑惑.今天聊一聊自己的理解,希望和大家一起学习. 首先,让我们看一个经典的setTimeOut的 ...

  6. [原创]K8Cscan插件之Web主机扫描（存活主机、机器名、Banner、标题）

    [原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...

  7. Word文档使用密码加密

    Word文档使用密码加密 方法如下: 文件-->信息-->保护文档-->用密码进行加密-->设置密码

  8. mysql 开发进阶篇系列 44 物理备份与恢复( 热备份xtrabackup 工具介绍)

    一.概述 物理备份和恢复又分为冷备份和热备份.与逻辑备份相比,它最大优点是备份和恢复的速度更快.因为物理备份的原理都是基于文件的cp. 1.1 冷备份 冷备份就是停掉数据库服务.这种物理备份一般很少使 ...

  9. mysql 开发基础系列14 字符集

    字符集是一套文字符号及其编码,比较规则的集合.第一个字符集是ascll(american standard code for information interchange).  1.  选择合适的字 ...

  10. MySql 踩坑小记

    MySql 踩坑一时爽,一直踩啊一直爽...   以下记录刚踩的三个坑,emmm... 首先是远程机子上创建表错误(踩第一个坑),于是将本地机器 MySql 版本回退至和远程一致(踩第二个坑),最后在 ...