HTML5 History对象,Javascript修改地址栏而不刷新页面
一、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修改地址栏而不刷新页面的更多相关文章
- HTML5 History对象,Javascript修改地址栏而不刷新页面(二)
一.实例说明: $('#btnOne').click(function () { var stateObject = { id: 1 }; var title = "本地首页"; ...
- HTML5 修改浏览器url而不刷新页面
嘛,起因是黑子大叔在微博上的一条@信息,找起了这个的实现,看了一圈google的中文信息内似乎还没有怎么提到这个的内容,就发表上来. 详细效果就是类似于用Firefox4+/Chrome 5+/Saf ...
- mui 从列表进入到详情,再返回,列表页还是进入列表之前的样子,而不刷新页面
mui 从列表进入到详情,再返回,列表页还是进入列表之前的样子,而不刷新页面
- PHP + JavaScript + Ajax 实现无刷新页面加载效果
数据源工厂 Json生成方式1 Json生成方式2 数据搬运工 数据加工师 转换类型 加工展示 结果展示 初始页面 点击按钮之后 总结 今天这个实验的思路就是实现一个无刷新的页面加载效果.具体的思路是 ...
- javascript修改div大小遮挡页面渲染问题
页面中引入了其他js文件,浏览器窗口改变,页面没有跟随渲染问题.最后找到原因是因为这个js方法少了最后一行: "right": RightBox_w. window.onresiz ...
- Html5使用history对象history.pushState()和history.replaceState()方法添加和修改浏览历史记录
根据网上参考自己做个笔记:参考网址:http://javascript.ruanyifeng.com/bom/history.html history.pushState() HTML5为histor ...
- 林大妈的JavaScript进阶知识(三):HTML5 History API
HTML5中新增了History API,它用于管理浏览器路由跳转的一个url栈.History是window对象的一部分,它也是一个对象,因此称它是BOM(类似DOM,Browser Object ...
- BOM之history对象
前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...
- BOM之history对象(转)
前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...
随机推荐
- ASCII是指128个字符(不是256个)和ASCII Extended Characters(就是那些奇怪的外文字符)
ASCII第一次以规范标准的型态发表是在1967年,最后一次更新则是在1986年,至今为止共定义了128个字元:其中33个字元无法显示(一些终端提供了扩展,使得这些字符可显示为诸如笑脸.扑克牌花式等8 ...
- c# 基础连接已经关闭: 连接被意外关闭,错误的解决
原文:c# 基础连接已经关闭: 连接被意外关闭,错误的解决 调试一个使用HttpWebRequest模拟提交表单的程序的时候频繁出现上述错误提示,google了一下发现了几个解决方案.1.在appli ...
- OLAP 大表和小表并行hash join
一个表50MB 一个表10GB 50M表做驱动表,放在PGA里 这时候慢在对对 10g 的全表扫描 对10个G扫描块 需要开并行 我有这样一个算法 一个进程 读 50mb 8进程 来 扫描 10gb ...
- 【HDOJ】2266 How Many Equations Can You Find
简单DFS. #include <cstdio> #include <cstring> #define MAXN 15 char str[MAXN]; __int64 x; i ...
- Unity笔记
1.使某个对象上的脚本失效和生效: GameObject.Find("xxx").transform.GetComponent<xxx>().enabled = fal ...
- linux 里 /etc/passwd 、/etc/shadow和/etc/group 文件内容解释
•/etc/passwd文件用于存放用户账户信息,每行代表一个账户,每个账户的各项信息用冒号分割,例如: root:x:::root:/root:/bin/bash username:password ...
- JavaScript框架设计 第14章 动画引擎
easing-js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- C语言基础课程 第三课 ADB(Android Debug Bridge)的使用
由于前面已经发布过Linux的博客了 基础班将Linux基础命令就不单独发表博客了,本节课主要就是利用adb连接手机进行一个Linux基本命令的复习.而且熟悉手机的底层运作,不用界面操作照样也能 ...
- LightOJ 1422 Halloween Costumes(记忆化搜索)
题意:给你n天分别要穿的衣服,可以套着穿,但是一旦脱下来就不能再穿了,问这n天要准备几件衣服. =============================================== ...
- Android开发必知--自定义Toast提示
开发过Android的童鞋都会遇到一个问题,就是在打印Toast提示时,如果短时间内触发多个提示,就会造成Toast不停的重复出现,直到被触发的Toast全部显示完为止.这虽然不是什么大毛病,但在用户 ...