美文网首页
有关history对象知识点的简单整理

有关history对象知识点的简单整理

作者: 橘子柚子橙子_ | 来源:发表于2018-08-25 23:25 被阅读0次

    资料参考:MDN

    从HTML5开始,可以对history栈中的内容进行操作。

    1. 在history中跳转

    使用back(),forward(),go()方法来完成用户在历史记录中的前进和后退。

    1.1 向前和向后跳转

    向后跳转:

    window.history.back()

    跟用户点击后退按钮的效果是一致的。
    试一下:
    打开下面这个网址:w3school
    点击页面中的某个链接,比如“开始学习JavaScript”这个链接。会发现页面进行了跳转。
    打开控制面板,在console中输入window.history.back()。会发现页面回退到了未点击链接之前的页面。
    接着再输入window.history.forward(),会发现页面又跳了回去。

    1.2 跳转到history中指定的一个点

    可以用go()进行会话历史指定位置的跳转。通过与当前页面的相对位置来标志。当前页面的标记为0
    向前移动一个页面:

    window.history.go(1)

    向后移动一个页面:

    window.history.go(-1)

    向后移动两个页面:

    window.history.go(-2)

    2. 添加和修改历史记录中的内容

    使用history.pushState()history.replaceState()方法,可以添加和修改历史记录中的内容。

    2.1 pushState()

    pushState()方法需要三个参数:状态对象、标题、URL。

    2.1.1 状态对象

    状态对象state是一个js对象,通过pushState()创建新的历史记录条目。无论什么时候用户导航到新的状态,popState事件就会被触发,且该事件的state属性包含该历史记录条目状态对象的副本。

    2.1.2 标题

    火狐浏览器目前忽略这个参数,可以传递一个空字符串。

    2.1.3 URL

    该参数定义了新的历史记录URL。新的URL不必为绝对路径。如果新的URL是相对路径,那么它将被作为相对于当前URL处理。新URL必须与当前URL同源。

    2.2 replaceState()

    history.replaceState()history.pushState()很相似。
    区别在于replaceState()是修改当前的历史记录而不是新建一个。

    2.3 popState事件

    每当活动的历史记录发生变化时,popState事件都会被传递给window对象。
    如果当前活动的历史记录项是被pushState创建的,或者是被replaceState改变的,那么popstate事件的状态属性state会包含一个当前历史记录状态对象的拷贝。


    完。

    相关文章

      网友评论

          本文标题:有关history对象知识点的简单整理

          本文链接:https://www.haomeiwen.com/subject/gkjniftx.html