html5之history对象理解
history对象之pushState,replaceState
浏览器有一个history对象,用来保存浏览历史,用户可以通过点击浏览器的后退或前进按钮在历史记录中切换。之前对history的操作的API主要是前进、后退、跳转等,而在HTML5中提供了2个新方法来管理history。
history.pushState(state, title, url);
history.replaceState(state, title, url);
参数说明
- state:一个与指定历史记录相关联的状态对象,当popstate事件触发时,会把该对象传入回调函数。如果不需要用到,可以传null。
- title:页面的标题。但当前大多数浏览器都不支持或忽略这个值。可以传null。
- url:添加或修改的history的网址。为了安全性,必须保持与当前URL同一个域。
简而言之,两个方法的区别只是pushState添加一个最新的历史记录,而replaceState则是把当前的页面的历史记录替换掉。他们最大的特点是添加或替换历史记录后,浏览器地址栏会变成你传的地址,而页面并不会重新载入或跳转。
例如,假设当前的页面地址是example.com/1.html,且history中此时只有一条当前页面的记录。
- 当你执行 history.pushState(null, null, “2.html”)后,浏览器的地址栏会显示example.com/2.html,但并不会跳转到2.html,甚至并不会去检查2.html存不存在,只是加入一个最新的历史记录项。此时history中会有两个记录。假如你此时点击页面上的link跳转到另外一个页面后,点击浏览器的后退按钮,则url会变成example.com/2.html,如果此前的1.html的页面浏览器有缓存的话会显示1.html的内容,否则会发起请求example.com/2.html。如果再次点后退,url会变成example.com/1.html。
- 而如果执行 history.replaceState(null, null, “2.html”)的话,浏览器的地址栏也会显示example.com/2.html,区别是history中只有当前2.html的记录,而1.html的记录已被替换掉。
利用这些特性,可以用来修改当前页面的URL来达成某些目的,比如可以用来记住搜索条件。
如果页面是数据展示的页面,页面上有一些搜索或过滤的条件,当用户点击这些条件时,页面通过AJAX把结果呈现到页面上,当点击某个结果页面跳转到下一个页面后,用户点击浏览器的后退按钮回到前一个页面后,即使页面有缓存,AJAX获取的结果也不会保留在页面上。如果后退后,需要记住此前的搜索条件和结果,可以在用户点击搜索条件时,把搜索条件利用history.replaceState添加到页面的query string中。
if (history.replaceState) {
history.replaceState(condition, null, "?" + $.param(condition, true));
}
页面可以设置成no-cache,当用户后退时,浏览器会重新请求带搜索条件的URL,后台根据搜索条件,把对应的结果页面呈现出来,从而达到记住搜索条件和结果的目的。
html5之history对象理解的更多相关文章
- Html5使用history对象history.pushState()和history.replaceState()方法添加和修改浏览历史记录
根据网上参考自己做个笔记:参考网址:http://javascript.ruanyifeng.com/bom/history.html history.pushState() HTML5为histor ...
- html5之history对象 控制浏览器前进或后退事件
一.摘要: 总结用history对象操作浏览器的历史记录的方法,在项目中使用的是mui框架,总结中包括我在实际项目中遇到的问题. 二.总结: 实现效果: 实现代码: 上面的编辑页面加载的时候就要先调用 ...
- BOM之history对象
前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...
- BOM之history对象(转)
前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...
- js history对象 手机物理返回键
有兴趣的可以了解下history对象,不感兴趣也可以直接跳到手机物理返回键监听部分 使用场景: 场景1:项目中一个表单页面,需得填写验证码,填写验证码后提交,由于使用的form直接提交,没有使用AJA ...
- 浅谈history对象以及路由插件原理
简介 History对象最初设计用来表示窗口的浏览历史,但是,出于隐私方面的原因,History对象不再允许脚本访问已经访问过的实际URL.虽然,我们不清楚历史URL,但是,我们可以通过History ...
- BOM函数之history对象
前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...
- HTML5 History对象,Javascript修改地址栏而不刷新页面
一.History对象 History 对象包含用户(在浏览器窗口中)访问过的 URL. History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问. ...
- history对象 back() forward() go() 和pushState() replaceState()
History(Window.history对象)对象保存着用户上网的历史记录.处于安全方面的考虑,开发人员无法得知用户浏览过的URL,但是借由用户访问过的页面列表,同样可以在不知道实际URL的情况下 ...
随机推荐
- linux更换shell外壳zsh
linux-外壳内核与shell的关系 内核处于外壳之中,通过外壳与shell(命令行)交互 外壳可以更换 ############################################## ...
- OpenACC kernels
▶ 使用 kernels 导语并行化 for 循环 ● 一重循环 #include <stdio.h> #include <time.h> #include <opena ...
- 62. 用流程自带的打印功能,IE浏览器打印出来是空白
用流程自带的打印功能,IE浏览器打印出来是空白的这个问题确认是由于IE启用了兼容模式导致的了把IE的兼容模式关掉就行了
- 【独家】完美解决appium安装app时,需要手动确认安装的问题
appium初始化driver时,如果未安装该app会先进行安装,安装时,很多安卓手机都会弹框,需要手动确认安装. 如小米的机器, 这是个头疼的问题,之前在网上找遍了,只有通过adb去点相对坐标成功了 ...
- 1.java生成随机不重复10位字符串
package org.changneng.util; import java.util.Random; public class A { public static void main(String ...
- find命令之时间戳使用示例
查看当前目录以及子目录下哪些文件占用的空间最大: find ./ -type f -exec du -m {} \; | sort -nr | head find ./ -type f ...
- cvc-complex-type.2.3: Element 'beans' cannot have character [children]
当启动spring的项目时,有时候会抛如下异常: Line 33 in XML document from ServletContext resource [/WEB-INF/backend-serv ...
- Hibernate迫切左外连接和迫切内连接
•迫切左外连接: •LEFT JOIN FETCH 关键字表示迫切左外连接检索策略. –list() 方法返回的集合中存放实体对象的引用, 每个 Department 对象关联的 Employee ...
- 遇到的IE不兼容问题总结
IE浏览器兼容问题困扰多时,由于IE6不在进行修补,IE6的考虑也越来越少,有些IE遇到的不兼容的现象想做一个总结 1宽度或高度:IE的是width+border+margin+padding goo ...
- SMO算法(转)
作者:[已重置]链接:https://www.zhihu.com/question/40546280/answer/88539689来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...