HTML5中的History对象
HTML5标准之前
基本操作
1.forward(number) 加载histroy列表中的下一个URL
2.back(number) 加载histroy列表中的上一个URL
3.go(number) 根据当前所处的页面，加载 history 列表中的某个具体的页面。
例子:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
</head>
<body>
<button onclick="forward()">前进(加载histroy列表中的下一个URL)</button>
<button onclick="now()">当下</button>
<button onclick="back()">后退(加载histroy列表中的上一个URL)</button>
<button onclick="go()">想去哪就去哪的go</button>
</body>
<script type="text/javascript" src="lodash.js"></script>
<script type="text/javascript">
function forward() {
//forward()相当于go(1)
window.history.forward();
}
function now() {
//forward()相当于go(0)
window.history.go(0);
}
function back() {
//forward()相当于go(-1)
window.history.back();
}
function go() {
window.history.go(10);
}
</script>
</html>
HTML5标准后
history.pushState()
新的状态信息就会被加入到history状态栈(列表)，而浏览器地址栏也会变成新的相对URL。
var stateObj = { foo: "bar" };
window.history.pushState(stateObj, "page 2", "newly.html");
但是:浏览器不会刷新，这样也不会发送请求。
pushState 不会触发 onpopstate
这里需要与window.location.href='./newly.html'这个操作方法区分开。因为这个会刷新url，且发送请求。
history.replaceState()
更新当前历史记录条目的状态对象或URL。
var stateObj = { foo: "bar" };
window.history.replaceState(stateObj, "page 1", "app.html");
不同于window.location.replace(url)。浏览器不会刷新，这样也不会发送请求。
replaceState不会触发 onpopstate
图解:
onpopstate
onpopstate事件是用来监听URL发生变化的情况触发。
window.onpopstate = function(){
}
具体测试代码:
zqz_History对象
HTML5中的History对象的更多相关文章
- HTML5中的Blob对象的使用
HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的.MYSQL中的BLOB类型就只是个二进制数据容器.而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIN ...
- JavaScript BOM-11-BOM的核心-window对象; window对象的控制,弹出窗口方法; 超时调用; 间歇调用; location对象常用属性; 位置操作--location.reaplace,location.reload(); BOM中的history对象; Screen对象及其常用属性; Navigator对象;
JavaScript BOM 学习目标 1.掌握什么是BOM 2.掌握BOM的核心-window对象 3.掌握window对象的控制.弹出窗口方法 什么是bom BOM(browser object ...
- 谈谈HTML5中的history.pushSate方法，弥补ajax导致浏览器前进后退无效的问题
移动端为了减少页面请求,有时候需要通过单页面做成多页面的效果,最近有这么个需求,表单填完后执行第一步,然后执行第二步,第二步执行完后再执行第三步,每一步都要保留之前的数据.这种情况用单页面实现再合适不 ...
- HTML5中的Range对象的研究
一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var range = docu ...
- HTML5中的Range对象的研究（转载）
一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var range = docu ...
- JS中的history对象
window.history指向History对象,它表示当前窗口的浏览历史. History对象保存了当前窗口访问过的所有页面网址. history.back()//后退到前一个网址 等同于 his ...
- html5中的FileReader对象
表单中有图片选项,选中图片文件之后要求可以预览.这个功能很多控件都封装好了,但是它们的底层都是FileReader对象. FileReader对象提供了丰富的功能,包括以二进制.以文本方式读取文件内容 ...
- HTML5中的二进制大对象Blob（转）
HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的.MYSQL中的BLOB类型就只是个二进制数据容器.而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIN ...
- 理解HTML5中Range对象
1.理解Range对象 重新来学习下HTML5中的Range对象和Selection对象,最近在维护富文本编辑器,感觉这方面的知识点很有用,所以趁着周末多学习下~ 什么是Range对象? 在H ...
随机推荐
- 用HTML+CSS画出一个同心圆
参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 <body> &l ...
- BZOJ3198 [Sdoi2013]spring 哈希 容斥原理
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ3198 题意概括 有n(1<=n<=100000)组数据,每组数据6个数. 现在问有几对 ...
- Python6 - 函数总结
一.函数的基本知识 定义: 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可 特性: 减少重复代码 使程序变的可扩展 使程序变得易维护 1.1函数定义规则 ...
- bfs-poj3278
题目链接:http://poj.org/problem?id=3278 题意:农夫原始在N位置上,他的目的是要抓到在K位置上的牛.牛的位置是固定不变的,而农夫的移动是在一条水平线上进行的,移动方式有以 ...
- macos下mongoDB 3.4.5 添加用户、设置权限
macos下mongoDB 3.4.5 添加用户.设置权限 在项目中需要根据项目运行环境访问,以不同的身份访问各自的db,所以研究了一下MongoDB的 需求: 给MongoDB添加两个用户分别用 ...
- NumPy学习(让数据处理变简单)
NumPy学习(一) NumPy数组创建 NumPy数组属性 NumPy数学算术与算数运算 NumPy数组创建 NumPy 中定义的最重要的对象是称为 ndarray 的 N 维数组类型. 它描述相同 ...
- 【Java并发核心六】CompletionService
CompletionService 接口的功能是以异步的方式一边生产新的任务,一边处理已完成任务的结果,这样就可以将执行任务与处理任务分离开. CompletionService 仅有一个实现类 Ex ...
- VsVim - Shortcut Key (快捷键)
Enable / Disable NuGet 中提供了禁用按钮.另外还可以通过 Ctrl+Shift+F12 在 Visual Studio 中实现 Enable / Disable. 移动光标类命令 ...
- 安卓android杀不死进程，保护，双进程守护，驻留，Marsdaemon，保活
韩梦飞沙 yue31313 韩亚飞 han_meng_fei_sha 313134555@qq.com =========== Android 进程常驻(0)----MarsDaemon使用说明
- 潭州课堂25班：Ph201805201 第十三课 文件 (课堂笔记)
对文件的操作, open('h:\\asa.txt') r 以只读方式打开 w 以写入方式打开,会覆盖已文件 X 如果已存在,会异常 a 如果文件存在,则在 ...