美文网首页
有关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对象知识点的简单整理

    资料参考:MDN 从HTML5开始,可以对history栈中的内容进行操作。 1. 在history中跳转 使用b...

  • JavaScriptBOM__History_location(

    目录: 1.History对象 2.location对象 一、History对象 1.什么是History His...

  • history

    History 对象 History 对象包含用户(在浏览器窗口中)访问过的 URL。History 对象是 wi...

  • History in Js

    History 对象 History 对象包含用户(在浏览器窗口中)访问过的 URL。History 对象是 wi...

  • BOM对象(三)———History 对象

    History 对象:History 对象包含用户(在浏览器窗口中)访问过的 URL。History 对象是 wi...

  • History对象

    History对象 History 对象包含用户(在浏览器窗口中)访问过的 URL。 History 对象是 wi...

  • history

    window.history属性指向 History 对象,它表示当前窗口的浏览历史。 History 对象保存了...

  • JS History对象

    概述 window.history属性指向History对象,它表示当前窗口的浏览历史。 History对象保存了...

  • BOM(Browser Object Model)

    window.history 返回history对象的引用 window.history.forword() / ...

  • JavaScript基础知识点--BOM之history对象及方

    history 对象 history 对象保存了用户在浏览器中访问页面的历史记录 history 对象方法 bac...

网友评论

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

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