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对象的更多相关文章

  1. HTML5中的Blob对象的使用

    HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的.MYSQL中的BLOB类型就只是个二进制数据容器.而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIN ...

  2. 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 ...

  3. 谈谈HTML5中的history.pushSate方法，弥补ajax导致浏览器前进后退无效的问题

    移动端为了减少页面请求,有时候需要通过单页面做成多页面的效果,最近有这么个需求,表单填完后执行第一步,然后执行第二步,第二步执行完后再执行第三步,每一步都要保留之前的数据.这种情况用单页面实现再合适不 ...

  4. HTML5中的Range对象的研究

    一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = docu ...

  5. HTML5中的Range对象的研究（转载）

    一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = docu ...

  6. JS中的history对象

    window.history指向History对象,它表示当前窗口的浏览历史. History对象保存了当前窗口访问过的所有页面网址. history.back()//后退到前一个网址 等同于 his ...

  7. html5中的FileReader对象

    表单中有图片选项,选中图片文件之后要求可以预览.这个功能很多控件都封装好了,但是它们的底层都是FileReader对象. FileReader对象提供了丰富的功能,包括以二进制.以文本方式读取文件内容 ...

  8. HTML5中的二进制大对象Blob（转）

    HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的.MYSQL中的BLOB类型就只是个二进制数据容器.而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIN ...

  9. 理解HTML5中Range对象

    1.理解Range对象    重新来学习下HTML5中的Range对象和Selection对象,最近在维护富文本编辑器,感觉这方面的知识点很有用,所以趁着周末多学习下~  什么是Range对象? 在H ...

随机推荐

  1. L3-020 至多删三个字符 （30 分) 线性dp

    给定一个全部由小写英文字母组成的字符串,允许你至多删掉其中 3 个字符,结果可能有多少种不同的字符串? 输入格式: 输入在一行中给出全部由小写英文字母组成的.长度在区间 [4, 1] 内的字符串. 输 ...

  2. 6-5 巡逻机器人 uva1600

    一开始按照标准bfs来写  标记为二维数组 后来按照三维数组写过了    ps大部分bfs都不会是二维数组搞定!!! 其中有一个bug弄了半个小时... 一开始我是先判断!vis[x][y][v.c] ...

  3. jvm本地实战

    前言 ​ 由于上次线上full gc,让我这个没有机会实战接触jvm的人,尝到了一定的甜头,同时也觉得自己还有很多东西需要去实战并总结.这是一篇记录jvm配置参数,使用jvisualvm工具来让人对j ...

  4. DB2<RedHed Linux> 创建数据库

    1 DB2 安装后组情况 Users User Desc Username Home folder Password Group   Administration User -dasusr1 /hom ...

  5. win10 图标异常 ，重命名后，图标不显示，名字错乱。

    win10 图标异常 ,重命名后,图标不显示,名字错乱. 按下快捷键 Win+R,在打开的运行窗口中输入 %localappdata%,回车. 在打开的文件夹中,找到 IconCache.db,将其删 ...

  6. rabbitmq使用（三）

    Publish/Subscribe In the previous tutorial we created a work queue. The assumption behind a work que ...

  7. mysql的密码忘记了怎么办

    我们的大脑不是电脑,有些东西难免会忘,但是会了这个再也不担心宝宝忘记密码了 (1)点击开始/控制面板/服务/mysql-->右击mysql看属性,里面有mysql的安装地址,然后找到安装地址进行 ...

  8. Codeforces Round #407 div2 题解【ABCDE】

    Anastasia and pebbles 题意:你有两种框,每个框可以最多装k重量的物品,但是你每个框不能装不一样的物品.现在地面上有n个物品,问你最少多少次,可以把这n个物品全部装回去. 题解:其 ...

  9. Android Fragment 详解（未完...）

    版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. 之前写过一篇关于 Fragment 生命周期的文章 ...

  10. 前端框架React Js入门教程【精】

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...