zoukankan      html  css  js  c++  java
  • Html5 History API解析

    浏览器前进与回退操作

    在传统的浏览器中我们只能通过调用window.history对象的 forward() 、 back() 或 go(number|url) 方法来进行页面的前进、回退或跳转到某一页面。

    而Ajax技术出现出现后我们常常用来实现页面无刷新的局部渲染效果,但却无法对无刷新的页面进行前进后退的操作。

    显然,HTML 5标准制定者也考虑到这一点,于是在HTML 5中为history对象新增了 pushState() 、 replaceState() 接口以及state属性

    state属性

    state属性的值为对象(默认值为null),该值由用户通过pushState()方法传入,用于记录与改条历史记录相关的页面数据信息

    pushState(state, title, url)

    pushState()方法包含三个参数:

    • state: 用户为该条历史记录写入的数据对象来存储页面相关数据信息
    • title:页面标题
    • url:页面url

    在HTML 5中,我们使用history.pushState()会往history中写入一条历史记录,history.length的值也会+1,history.state被传入的state对象覆盖。

    replaceState(state, title, url)

    replaceState()方法的三个参数和pushState()相同,但replaceState()用于修改当前页的历史记录。

    如何使用state对象?

    HTML5除了带给我们以上三个新增的接口以外,还允许浏览器在window上监听popState事件,每当对页面进行前进或后退的操作时,浏览器会从历史记录中取出state对象并通过参数传入popState事件的回调函数中:

    window.addEventListener("popstate", function() {
        var currentState = history.state;
        /*
         * 使用state做点事情
        */                                            
    });

    这部分的API比较少,也没什么好讲的,权当做个记录,END

  • 相关阅读:
    [解题报告]HDU 1094 A+B for InputOutput Practice (VI)
    [解题报告]HDU 1089 A+B for InputOutput Practice (I)
    [解题报告]HDU 1279 验证角谷猜想
    [解题报告]HDU 1091 A+B for InputOutput Practice (III)
    [解题报告]HDU 2019 数列有序!
    [解题报告]HDU 1201 18岁生日
    [解题报告]HDU 1170 Balloon Comes!
    11使用TensorFlow自定义模型和训练
    12使用TensorFlow加载和预处理数据
    10训练深度神经网络
  • 原文地址:https://www.cnblogs.com/WhiteCusp/p/4427989.html
Copyright © 2011-2022 走看看