zoukankan      html  css  js  c++  java
  • html5之history对象理解

    history对象之pushStatereplaceState
    浏览器有一个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,后台根据搜索条件,把对应的结果页面呈现出来,从而达到记住搜索条件和结果的目的。

  • 相关阅读:
    eslint and stylelint config
    CSS3 animaion 和 transition 比较
    css之px、em、rem
    Three.js 中 相机的常用参数含义
    ES6中函数调用自身需要注意的问题
    MySQL数据库迁移之data目录
    ES6扩展运算符(三点运算符)...的用法
    Vue 组件通信方案
    关于ES6中Promise的应用-顺序合并Promise,并将返回结果以数组的形式输出
    Ubuntu 使用gps
  • 原文地址:https://www.cnblogs.com/xiaoqi2018/p/10252643.html
Copyright © 2011-2022 走看看