HTML5无刷新修改Url,history pushState/replaceState
一、认识window.history
window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象。window对象通过history对象提供对览器历史记录的访问能力。它暴露了一些非常有用的方法和属性,让你在历史记录中自由前进和后退。
1、历史记录的前进和后退
在历史记录中后退,可以这么做:
- window.history.back();
这就像用户点击浏览器的后退按钮一样。
类似的,你可以前进,就像在浏览器中点击前进按钮,像这样:
window.history.forward();
2、移动到指定历史记录点
通过指定一个相对于当前页面位置的数值,你可以使用go()方法从当前会话的历史记录中加载页面(当前页面位置索引值为0,上一页就是-1,下一页为1)。
要后退一页(相当于调用back()):
- window.history.go(-1);
向前移动一页(相当于调用forward()):
- window.history.go(1);
类似的,传递参数“2”,你就可以向前移动2个记录点。你可以查看length属性值,了解历史记录栈中一共有多少个记录点:
- window.history.length;
二、修改历史记录点
HTML5的新API扩展了window.history,使历史记录点更加开放了。可以存储当前历史记录点、替换当前历史记录点、监听历史记录点,下面逐一简要说明一下。
1、存储当前历史记录点
存储的方式类似于数组的入栈(Array.push()
),在window.history里新增一个历史记录点,例如:
- // 当前的url为:http://www.qingdou.me/index.html
- var json={time:new Date().getTime()};
- // @状态对象:记录历史记录点的额外对象,可以为空
- // @页面标题:目前所有浏览器都不支持
- // @可选的url:浏览器不会检查url是否存在,只改变url,url必须同域,不能跨域
- window.history.pushState(json,”",”http://www.qingdou.me/post-1.html”);
var state = {
title: title,
url: options.url,
otherkey: othervalue
};
window.history.pushState(state, document.title, url);
history.pushState方法接受三个参数,依次为:
state:一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null。
title:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null。
url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
执行了pushState方法后,页面的url地址为http://www.qingdou.me/post-1.html。
2、替换当前历史记录点
window.history.replaceState和window.history.pushState类似,不同之处在于replaceState不会在window.history里新增历史记录点,其效果类似于window.location.replace(url),都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用replaceState()方法会特别合适。
3、监听历史记录点
监听历史记录点,直观的可认为是监听URL的变化,但会忽略URL的hash部分,监听URL的hash部分,HTML5有新的API为onhashchange,我的博客里也有说到该方法和跨浏览器的兼容解决方案。可以通过window.onpopstate来监听url的变化,并且可以获取存储在该历史记录点的状态对象,也就是上文说到的json对象,如:
- // 当前的url为:http://www.qingdou.me/post-1.html
- window.onpopstate=function()
- {
- // 获得存储在该历史记录点的json对象
- var json=window.history.state;
- // 点击一次回退到:http://www.qingdou.me/index.html
- // 获得的json为null
- // 再点击一次前进到:http://www.qingdou.me/post-1.html
- // 获得json为{time:1369647895656}
- }
值得注意的是:javascript脚本执行window.history.pushState和window.history.replaceState不会触发onpopstate事件。
还有一点注意的是,谷歌浏览器和火狐浏览器在页面第一次打开的反应是不同的,谷歌浏览器奇怪的是回触发onpopstate事件,而火狐浏览器则不会。
浏览器兼容性表:
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
replaceState, pushState | 5 | 4.0 (2.0) | 10 | 11.50 | 5.0 |
history.state | 18 | 4.0 (2.0) | 10 | 11.50 | 6.0 |
基于ajax与html无刷新换url的jquery插件pjax。大家可以去网上看看。
HTML5无刷新修改Url,history pushState/replaceState的更多相关文章
- HTML5无刷新修改URL
HTML5新添加了两个api分别是pushState和replaceState,DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,可以在用户的访问记录中前进和 ...
- HTML5 API——无刷新更新地址 history.pushState/replaceState 方法
尽 管是上面讲到的<JavaScript高级程序设计>(第二版)中提到,BOM中的location.path/query…… (window.location)在通过JavaScript更 ...
- 【转】HTML5 API——无刷新更新地址 history.pushState/replaceState 方法
(window.location)在通过JavaScript更改以后,浏览器都会通过刷新来到达你更改后的URL(location的意思就是位 置..) 而在JavaScript MVC开始流行之后,通 ...
- HTML5 API—无刷新更新地址 history.pushState/replaceState方法(例子) (转)
尽管是上面讲到的<JavaScript高级程序设计>(第二版)中提到,BOM中的location.path/query…… (window.location)在通过JavaScript更改 ...
- HTML5新api即pushState和replaceState实现无刷新修改url
1,首先我面临一个需求,页面回退时需要知道来之前的页面状态.很简单,回退时在url里赋参数即可.问题是在ipad上,回退按钮是安卓那边的,我控制不了.只好采用js无刷新修改url历史记录,来告诉服务器 ...
- HTML5实现无刷新修改URL
前言 今天在做一个vue的搜索功能,需要从搜索结果页面跳转到细节页面,然后点击返回还能返回到刚刚的结果页面,如果只用window.history.go(-1)当然会重新刷新搜索页面,当然是不行的. 我 ...
- 通过history.pushState无刷新改变url
通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...
- history.pushState无刷新改变url
通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...
- history.pushState 实现浏览器页面不刷新修改url链接
最近遇到了在不刷新页面的情况下修改浏览器url链接的需求,遂求助于万能的度娘,最终通过history.pushState()完美解决问题.现在将我理解的一些内容分享一下,不对的地方欢迎大家指出. 在使 ...
随机推荐
- 张高兴的 Xamarin.Forms 开发笔记:Android 快捷方式 Shortcut 应用
一.Shortcut 简介 Shortcut 是 Android 7.1 (API Level 25) 的新特性,类似于苹果的 3D Touch ,但并不是压力感应,只是一种长按菜单.Shortcut ...
- 502 VS 504
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/89 首先看一下概念: 502:作为网关或者代理工作的服务器尝试执 ...
- 数据库SQL优化
1.对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...
- git push的用法
git push <远程仓库名> <本地分支名>:<远程分支名>
- angularjs 字段排序 多字段排序
我们用angularjs {{}},ng-model循环绑定数组或对象的内容的时候,有时候会用到排序,有时候可能会有多个字段排序 具体要用到过滤 数据的展现,可以通过ng-repeat实现.当网页解析 ...
- Centos7 安装oracle数据库
参考的内容: http://docs.oracle.com/cd/E11882_01/install.112/e24325/toc.htm#CHDCBCJF http://www.cnblogs.co ...
- Sticky Footer 绝对底部的两种套路
最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端领域的良莠不齐 绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果: ...
- Robot Framework 学习笔记(二)-------第一个脚本
robot Framework环境搭建好之后先来一个简单的脚本跑一下 一.新建项目 二.新建测试套件 三.创建测试用例 四.导入Selenium2Library库 因为RF框架编写基于web 的测试 ...
- shell 变量的间接引用
参考: 高级 bash 脚本编程指南 eval var1=\$$var2 变量间接引用 贴个脚本: server1=1.1.1.1 server2=1.1.1.2 server3=1.1.1.3 fo ...
- IO流之字符流知识总结
字符流:读写字符的 顶级父类是Reader和Writer 操作流程 在Java中IO操作也是有相应步骤的,以文件操作为例,主要的操作流程如下: 使用File类打开一个文件 通过字节流或字符流的子类,指 ...