JavaScript历史状态管理
1、API
（1）history.pushState：能够在不加载新页面的情况下改变浏览器的 URL
history.pushState({name:"Nicholas"}, "Nicholas' page", "nicholas.html");
执行 pushState() 方法后，新的状态信息就会被加入历史状态栈，而浏览器地址栏也会变成新的相对 URL。
但是，浏览器并不会真的向服务器发送请求，即使状态改变之后查询 location.href 也会返回与地址栏中相同的地址。另外，第二个参数目前还没有浏览器实现，因此完全可以只传入一个空字符串，或者一个短标题也可以。而第一个参数则应该尽可能提供初始化页面状态所需的各种信息。
因为 pushState() 会创建新的历史状态，所以你会发现“后退”按钮也能使用了。按下“后退”按钮，会触发 window 对象的 popstate 事件.
（2）replaceState
要更新当前状态，可以调用 replaceState() ，传入的参数与 pushState() 的前两个参数相同。调用这个方法不会在历史状态栈中创建新状态，只会重写当前状态。
注：
（1）新URL必须和当前URL在同一个源下;否则，pushState() 将丢出异常。
（2）pushState()方法绝不会导致hashchange 事件被激活。
2、示例
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JavaScript历史状态管理</title>
</head> <body>
<div id="historyEvent">
history API
</div>
<script>
var historyEvent = document.getElementById('historyEvent');
historyEvent.onclick = function() {
//pushState 不能修改网页标题
history.pushState(null, '新标签页标题', '/123');
document.title = '新标签页标题'
}
</script>
</body> </html>
JavaScript历史状态管理的更多相关文章
- JavaScript HTML5脚本编程——“历史状态管理”的注意要点
历史状态管理是现代Web应用开发中的一个难点.在现代Web应用中,用户的每次操作不一定会打开一个全新的页面,因此"后退"和"前进"按钮也就失去了作用,导致用户很 ...
- 《前端之路》之 Javascript 模块化管理的来世今生
目录 第二章 - 04: Javascript 模块化管理的来世今生 一.什么是模块化开发 1-1.模块化第一阶段 1-2.封装到对象 1-3. 对象的优化 二.模块化管理的发展历程 2-1.Comm ...
- JavaScript包管理器综述
JavaScript包管理器综述 作者:chszs,未经博主同意不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs 对于JavaScript来说.包管理器 ...
- javaScript 内存管理机制
大家好,今天分享的主题为 JavaScript 内存管理机制,本次分享将从以下三部分进行讲述: js 内存管理与 js 垃圾 常见的 GC 算法 V8 引擎的垃圾回收 js 内存管理与 js 垃圾 关 ...
- JavaScript 事件管理
在设计JavaScript xxsdk的时候考虑到能让调用者参与到工作流程中来,开始用了回调函数.如下: this.foo = function(args,callbackFn) { //do som ...
- [原创作品]Javascript内存管理机制
如果你也喜欢分享,欢迎加入我们:QQ group:164858883 内存策略:堆内存和栈内存栈内存:在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当在一段代码块中定义一个 ...
- 浅谈javascript性能-管理内存
上次说到,javascript脚本到底应该放在哪里?用什么用处? 以下2点: 在Html.Body部分中的JS会在页面加载的时候执行.即-用户触发一个事件的时候执行的脚本.eg:onload事件... ...
- javascript 内存管理
1.垃圾回收机制 在编写Javascript程序时,开发人员不用关心内存问题,内存分配及无用内存的回收完全实现了自动化管理.垃圾收集器会按照预定的时间间隔, 周期性的找出那些不再继续使用的变量,然后释 ...
- JavaScript内存管理
低级语言,比如C,有低级的内存管理基元,想malloc(),free().另一方面,JavaScript的内存基元在变量(对象,字符串等等)创建时分配,然后在他们不再被使用时"自动" ...
随机推荐
- CodeVS1611_APIO2009_抢掠计划_C++
题目:http://codevs.cn/problem/1611/ 关于题解请戳这里:http://www.cnblogs.com/hadilo/p/5892765.html 下面给一个可以A的代码, ...
- 借教室（NOIP2012）
原题传送门 其实就是求能满足多少个订单.. 然后搞上差分, 又因为如果前n个能够满足,那么前m个一定能满足(m<n) 所以可以二分(重点!) 然后乱搞..就AC了(其实也挺麻烦的...233~) ...
- Linux/Android——input_handler之evdev (四) 【转】
转自:http://blog.csdn.net/u013491946/article/details/72638919 版权声明:免责声明: 本人在此发文(包括但不限于汉字.拼音.拉丁字母)均为随意敲 ...
- python 二分法查找思考理解小白向け
首先说一下二分法查找的思路.这是面向小白的课程,大佬请让步谢谢 给定一个有序的序列(必须是排好序的)例如[1,2,3,4,5,6,7,8,9,10,20,30,400],然后我们查询一个元素出现的坐标 ...
- 使用log4j2分离系统日志与业务日志
前一篇文章介绍了log4j2 扩展日志级别,支持将系统日志与业务处理日志拆分,现在介绍一下通过日志级别将系统日志与业务日志分类,要达到这个目的很容易,只需要配置一下log4j的xml文件: <? ...
- 【linux高级程序设计】（第十三章）Linux Socket网络编程基础 4
网络调试工具 tcpdump 功能:打印指定网络接口中与布尔表达式匹配的报头信息 关键字: ①类型:host(默认).net.port host 210.27.48.2 //指明是一台主机 net 2 ...
- 并发策略-CAS算法
对于并发控制而言,我们平时用的锁(synchronized,Lock)是一种悲观的策略.它总是假设每一次临界区操作会产生冲突,因此,必须对每次操作都小心翼翼.如果多个线程同时访问临界区资源,就宁可牺牲 ...
- hdu 3790(SPFA)
最短路径问题 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- UVA 437 巴比伦塔 【DAG上DP/LIS变形】
[链接]:https://cn.vjudge.net/problem/UVA-437 [题意]:给你n个立方体,让你以长宽为底,一个个搭起来(下面的立方体的长和宽必须大于上面的长和宽)求能得到的最长高 ...
- 洛谷 P1094 纪念品分组【贪心/双指针/最少多少组合法不要求连续的两两捆绑】
题目描述 元旦快到了,校学生会让乐乐负责新年晚会的纪念品发放工作.为使得参加晚会的同学所获得 的纪念品价值相对均衡,他要把购来的纪念品根据价格进行分组,但每组最多只能包括两件纪念品, 并且每组纪念品的 ...