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. c# windows服务如何获取自己的安装路径

    public static string GetWindowsServiceInstallPath(string ServiceName)        {            string key ...

  2. vue中mixin的一点理解

    vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别?     ...

  3. centos7.2 使用rpm安装jdk8

    1.下载JDK 去jdk下载页面找到要下载的jdk,用wget下载 wget --no-check-certificate --no-cookies --header "Cookie: or ...

  4. 一种使用pyinstaller时图标问题解决方案

    一种使用pyinstaller时图标问题解决方案 0x00 场景   使用pyinstaller将.py文件编译成.exe文件时,想要使用自己心仪的图标(.ico)比较麻烦.在使用pyinstalle ...

  5. 障碍路线Obstacle Course

    P1649 [USACO07OCT]障碍路线Obstacle Course 裸的dfs,今天学了一个新招,就是在过程中进行最优性减枝. #include<bits/stdc++.h> us ...

  6. 不一样的go语言-一样的语法

    前言   上一篇入门篇算是初识庐山真面目,我们知道了一个go程序的构成,在这里总结一下. //包名 package //导入包 import "fmt" //main方法,程序入口 ...

  7. 潭州课堂25班:Ph201805201 WEB 之 JS 第五课 (课堂笔记)

    算数运算符 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. angular.js--------demo1

    <!doctype html><html ng-app> <head> <meta charset="utf-8"> </he ...

  9. CocosCreator项目结构

    1,通过 Dashboard,我们可以创建一个 Hello World 项目作为开始,创建之后的项目有特定的文件夹结构.[参考来源:官方文档] 2,初次创建并打开一个 Cocos Creator 项目 ...

  10. Oracle中使用透明网关链接到Sqlserver(转)

    测试环境介绍 1.ORACLEServer   Database version:10.2.0 IP:192.168.1.5 ORACLE_HOME:D:\oracle\product\10.2.0\ ...