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对象理解的更多相关文章

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

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

  2. html5之history对象 控制浏览器前进或后退事件

    一.摘要: 总结用history对象操作浏览器的历史记录的方法,在项目中使用的是mui框架,总结中包括我在实际项目中遇到的问题. 二.总结: 实现效果: 实现代码: 上面的编辑页面加载的时候就要先调用 ...

  3. BOM之history对象

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

  4. BOM之history对象(转)

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

  5. js history对象 手机物理返回键

    有兴趣的可以了解下history对象,不感兴趣也可以直接跳到手机物理返回键监听部分 使用场景: 场景1:项目中一个表单页面,需得填写验证码,填写验证码后提交,由于使用的form直接提交,没有使用AJA ...

  6. 浅谈history对象以及路由插件原理

    简介 History对象最初设计用来表示窗口的浏览历史,但是,出于隐私方面的原因,History对象不再允许脚本访问已经访问过的实际URL.虽然,我们不清楚历史URL,但是,我们可以通过History ...

  7. BOM函数之history对象

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

  8. HTML5 History对象,Javascript修改地址栏而不刷新页面

    一.History对象 History 对象包含用户(在浏览器窗口中)访问过的 URL. History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问. ...

  9. history对象 back() forward() go() 和pushState() replaceState()

    History(Window.history对象)对象保存着用户上网的历史记录.处于安全方面的考虑,开发人员无法得知用户浏览过的URL,但是借由用户访问过的页面列表,同样可以在不知道实际URL的情况下 ...

随机推荐

  1. php使用tcpdf实现在线PDF功能

    今天看书,发现有个例子就是实现php生成pdf格式文件的例子,所以扩展了下百度了下 找了个tcpdf Git上有地址,如果感冒自行下载 https://github.com/tecnickcom/tc ...

  2. git超详细教程留着当手册

    GitHub操作流程 : 第一次提交 : 方案一 : 本地创建项目根目录, 然后与远程GitHub关联, 之后的操作一样; -- 初始化Git仓库 :git init ; -- 提交改变到缓存 :gi ...

  3. centos7.3安装zip,unzip

    安装命令: yum install -y unzip zip

  4. C# WebBrowser

    WebBrowser中的按钮调用WinForm中的事件: private void Form1_Load(object sender, EventArgs e) { this.webBrowser1. ...

  5. 28. 表单css样式定义格式

    form>table>tbody>tr>td{padding:5px;font-size:14px;font-family:"Microsoft YaHei" ...

  6. VBA 打开带密码的文件

    ' 打开文件 ROSE 为只读密码 CHECK 为编辑密码    Set wb = Workbooks.Open(file, 0, True, , "ROSE", "CH ...

  7. Gradle Maven部署,转化

    参考:(易百教程)http://www.yiibai.com/gradle/gradle_deployment.html 目录: Gradle部署 Maven转化为Gradle Gradle部署: c ...

  8. htop工具使用

    1 防止进程重复显示 在使用htop查看进程信息的时候,经常会出现很多个进程重复的情况,如下情况: 经研究发现,htop会把一个进程里的线程当做一个进程来显示出来,上图中的java进程有多个线程,所以 ...

  9. 简单AOP

    代码如下 //使用说明 //1,新加接口与类 //2,新加类并实现ICallHandler类: ExecuteHandler //3,新建特性并实现HandlerAttribute和重写其中的Crea ...

  10. mysql 中文编码问题