一、History对象

History 对象包含用户(在浏览器窗口中)访问过的 URL。

History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。

注释:没有应用于 History 对象的公开标准,不过所有浏览器都支持该对象。

IE: Internet Explorer, F: Firefox, O: Opera.

1. History 对象属性

属性 描述 IE F O
length 返回浏览器历史列表中的 URL 数量。 4 1 9

2.  History 对象方法

方法 描述 IE F O
back() 加载 history 列表中的前一个 URL。 4 1 9
forward() 加载 history 列表中的下一个 URL。 4 1 9
go() 加载 history 列表中的某个具体页面。 4 1 9

在Html5中新增了history.pushState()和history.replaceState()两个方法,他们允许添加和修改history实体。

同时,这些防范和window.onpopstate事件一起工作。支持IE10+,Google,FF

pushState()方法

pushState()有三个参数:state对象,标题(现在是被忽略,未作处理),URL(可选)。具体细节:

· state对象 –state对象是一个JavaScript对象,它关系到由pushState()方法创建出来的新的history实体。用以存储关于你所要插入到历史 记录的条目的相关信息。State对象可以是任何Json字符串。因为firefox会使用用户的硬盘来存取state对象,这个对象的最大存储空间为640k。如果大于这个数 值,则pushState()方法会抛出一个异常。如果确实需要更多的空间来存储,请使用本地存储。

· title—firefox现在回忽略这个参数,虽然它可能将来会被使用上。而现在最安全的使用方式是传一个空字符串,以防止将来的修改。或者可以传一个简短的标题来表示state

· URL—这个参数用来传递新的history实体的URL,注意浏览器将不会在调用pushState()方法后加载这个URL。但也许会过一会尝试加载这个URL。比如在用户重启了浏览器后,新的url可以不是绝对路径。如果是相对路径,那么它会相对于现有的url。新的url必须和现有的url同域,否则pushState()将抛出异常。这个参数是选填的,如果为空,则会被置为document当前的url。

replaceState()方法

用法和pushState()一样,只是它用来更新当前state对象和当前history实体的url。

popstate事件

当history实体被改变时,popstate事件将会发生。如果history实体是有pushState和replaceState方法产生的,popstate事件的state属性会包含一份来自history实体的state对象的拷贝,

当你浏览会话历史记录时,不管你是点击前进或者后退按钮,还是使用history.go和history.back方法,popstate都会被触发。

详见window.onpopstate

 读取当前state

当页面加载时,它可能会有一个非空的state对象。这可能发生在当页面设置一个state对象(使用pushState或者replaceState)之后用户重启了浏览器。当页面重新加载,页面将收到onload事件,但不会有popstate事件。

1.直接使用history.state属性读取

2.在popstate事件触发后获取state对象event.state

实例1:

$('#btnOne').click(function () {
var stateObject = {};
var title = "修改地址";
var newUrl = '/view/fontface4.html';
//修改地址栏中的地址
history.pushState(stateObject, title, newUrl);
});
$('#btnTwo').click(function () {
//获取操作历史记录
console.info(history.length);
});

实例2:

$('#btnOne').click(function () {
for (var i = 0; i < 5; i++) {
var stateObject = { id: i };
var title = "修改地址" + i;
var newUrl = '/view/fontface4.html#' + i;
//修改地址栏中的地址
history.pushState(stateObject, title, newUrl);
}
});
$('#btnTwo').click(function () {
//获取操作历史记录
console.info(history.length);
});
window.addEventListener('popstate', function (event) {
console.info(event);
console.info(event.state);
console.info(event.state.id);
});

HTML5 History对象,Javascript修改地址栏而不刷新页面的更多相关文章

  1. HTML5 History对象,Javascript修改地址栏而不刷新页面(二)

    一.实例说明: $('#btnOne').click(function () { var stateObject = { id: 1 }; var title = "本地首页"; ...

  2. HTML5 修改浏览器url而不刷新页面

    嘛,起因是黑子大叔在微博上的一条@信息,找起了这个的实现,看了一圈google的中文信息内似乎还没有怎么提到这个的内容,就发表上来. 详细效果就是类似于用Firefox4+/Chrome 5+/Saf ...

  3. mui 从列表进入到详情,再返回,列表页还是进入列表之前的样子,而不刷新页面

    mui 从列表进入到详情,再返回,列表页还是进入列表之前的样子,而不刷新页面

  4. PHP + JavaScript + Ajax 实现无刷新页面加载效果

    数据源工厂 Json生成方式1 Json生成方式2 数据搬运工 数据加工师 转换类型 加工展示 结果展示 初始页面 点击按钮之后 总结 今天这个实验的思路就是实现一个无刷新的页面加载效果.具体的思路是 ...

  5. javascript修改div大小遮挡页面渲染问题

    页面中引入了其他js文件,浏览器窗口改变,页面没有跟随渲染问题.最后找到原因是因为这个js方法少了最后一行: "right": RightBox_w. window.onresiz ...

  6. Html5使用history对象history.pushState()和history.replaceState()方法添加和修改浏览历史记录

    根据网上参考自己做个笔记:参考网址:http://javascript.ruanyifeng.com/bom/history.html history.pushState() HTML5为histor ...

  7. 林大妈的JavaScript进阶知识(三):HTML5 History API

    HTML5中新增了History API,它用于管理浏览器路由跳转的一个url栈.History是window对象的一部分,它也是一个对象,因此称它是BOM(类似DOM,Browser Object ...

  8. BOM之history对象

    前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...

  9. BOM之history对象(转)

    前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...

随机推荐

  1. ASCII是指128个字符(不是256个)和ASCII Extended Characters(就是那些奇怪的外文字符)

    ASCII第一次以规范标准的型态发表是在1967年,最后一次更新则是在1986年,至今为止共定义了128个字元:其中33个字元无法显示(一些终端提供了扩展,使得这些字符可显示为诸如笑脸.扑克牌花式等8 ...

  2. c# 基础连接已经关闭: 连接被意外关闭,错误的解决

    原文:c# 基础连接已经关闭: 连接被意外关闭,错误的解决 调试一个使用HttpWebRequest模拟提交表单的程序的时候频繁出现上述错误提示,google了一下发现了几个解决方案.1.在appli ...

  3. OLAP 大表和小表并行hash join

    一个表50MB 一个表10GB 50M表做驱动表,放在PGA里 这时候慢在对对 10g 的全表扫描 对10个G扫描块 需要开并行 我有这样一个算法 一个进程 读 50mb 8进程 来 扫描 10gb ...

  4. 【HDOJ】2266 How Many Equations Can You Find

    简单DFS. #include <cstdio> #include <cstring> #define MAXN 15 char str[MAXN]; __int64 x; i ...

  5. Unity笔记

    1.使某个对象上的脚本失效和生效: GameObject.Find("xxx").transform.GetComponent<xxx>().enabled = fal ...

  6. linux 里 /etc/passwd 、/etc/shadow和/etc/group 文件内容解释

    •/etc/passwd文件用于存放用户账户信息,每行代表一个账户,每个账户的各项信息用冒号分割,例如: root:x:::root:/root:/bin/bash username:password ...

  7. JavaScript框架设计 第14章 动画引擎

    easing-js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  8. C语言基础课程 第三课 ADB(Android Debug Bridge)的使用

     由于前面已经发布过Linux的博客了 基础班将Linux基础命令就不单独发表博客了,本节课主要就是利用adb连接手机进行一个Linux基本命令的复习.而且熟悉手机的底层运作,不用界面操作照样也能 ...

  9. LightOJ 1422 Halloween Costumes(记忆化搜索)

    题意:给你n天分别要穿的衣服,可以套着穿,但是一旦脱下来就不能再穿了,问这n天要准备几件衣服.      =============================================== ...

  10. Android开发必知--自定义Toast提示

    开发过Android的童鞋都会遇到一个问题,就是在打印Toast提示时,如果短时间内触发多个提示,就会造成Toast不停的重复出现,直到被触发的Toast全部显示完为止.这虽然不是什么大毛病,但在用户 ...