我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JavaScript history 对象详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

JavaScript history 对象详解

前言:

  我们浏览一个网页时可能不太会注意网页前进后退这些操作,但是在开发时你是否想过页面之间的跳转经历了什么,浏览器时怎么保存的页面信息,重新返回上一个页面的时候是否需要重新加载页面呢,会有很对疑问,要想解决这些问题,首先需要知道浏览器中的window下的history对象,本文来详细总结一下该对象的相关知识点。

  history 对象表示当前窗口首次使用以来用户的导航历史记录。因为 history window 的属性,所以每个 window 都有自己的 history 对象。出于安全考虑,这个对象不会暴露用户访问过的 URL,但可以通过它在不知道实际 URL 的情况下前进和后退。

1、路由导航

  history.go() 方法可以在用户历史记录中沿任何方向导航,可以前进也可以后退。这个方法只接收一个参数,这个参数可以是一个整数,表示前进或后退多少步。


 history.go(-1);// 后退一页

history.go(1);// 前进一页

history.go(2);// 前进两页 //

go() 有两个简写方法: back() 和 forward() 。

history.back();// 后退一页

history.forward();//前进一页

history 对象还有一个 length 属性,history.length == 1表示这是用户窗口中的第一个页面

 histroy的go方法,back方法、forword方法以及用户在浏览器手动的前进后退按钮都会导致页面刷新后跳转。 

2、历史状态管理API

(1)hashchange 事件

  hashchange:history 对象的一个新特性是hashchange,会在页面 URL 的散列变化时被触发,开发者可以在此时执行某些操作。当URL的片段标识符更改时,将触发hashchange事件 (跟在#符号后面的URL部分,包括#符号)。而状态管理API 则可以让开发者改变浏览器 URL 而不会加载新页面。

比如:pushState和replaceState方法,页面并不会刷新,但是路由会发生改变。

(2)popstate 事件

  当活动历史记录条目更改时,将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本。需要注意的是调用history.pushState()history.replaceState()不会触发popstate事件。只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在Javascript代码中调用history.back()或者history.forward()方法)

(3)history.pushState() 方法

  pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态(state)。这个方法接收 3 个参数:一个 state 对象、一个新状态的和一个(可选的)相对 URL。pushState() 方法执行后,状态信息就会被推到历史记录中,浏览器地址栏也会改变以反映新的相对 URL。URL栏显示新地址, 但是不会加载 页面,甚至不会检查页面是否存在,该方法会增加history.length

(4)history.replaceState()方法

  replaceState()方法修改当前历史记录实体。这个方法接收 3 个参数:一个 state 对象、一个新状态的和一个(可选的)相对 URL。replaceState() 方法执行后,将会更新当前的state对象或者当前历史实体的URL来响应用户的的动作,URL栏显示新地址, 但是不会加载 页面,甚至不会检查页面是否存在。该方法不会增加history.length


<body>
  <button onclick="handleNext()">点我到下一页</button><br>
  <button onclick="handleLast()">点我到上一页</button><br>
  <script>
    window.onload = function () {
      console.log(window.history);
    }
    window.addEventListener('hashchange', function () {
      console.log('The hash has changed!')
    }, false);
    window.addEventListener('popstate', (event) => {
      console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
    });
    function handleNext() {
      const state = { userId: "1234", page: "2" }
      const title = '二'
      const url = 'page2.html'
      window.history.pushState(state, title, url)
      console.log(window.history);
    }
    function handleLast() {
      const state = { userId: "1234", page: "21" }
      const title = '一'
      const url = 'page21.html'
      window.history.replaceState(state, title, url)
      console.log(window.history);
    }
  </script>
</body>

运行结果如下:

3、补充:URL的hash

  URL的hash也就是锚点(#), 本质上是改变window.locationhref属性,我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新,

如下图所示:

写在最后:

到此这篇关于JavaScript history 对象详解的文章就介绍到这了,更多相关history 对象内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JavaScript history 对象详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JavaScript history对象举例分析

这篇文章主要介绍“JavaScript history对象举例分析”,在日常操作中,相信很多人在JavaScript history对象举例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScrip
2023-06-21

javascript中的History对象如何使用

这篇文章主要介绍“javascript中的History对象如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“javascript中的History对象如何使用”文章能帮助大家解决问题。leng
2023-06-17

一文详解JavaScript数组对象和字符串对象

这篇文章主要介绍了JavaScript数组对象和字符串对象,文章中有详细的代码示例,对学习或工作有一定的帮助,需要的小伙伴可以参考一下
2023-05-17

Javascript Object对象类型使用详解

面向对象编程(Object Oriented Programming)将现实世界中的复杂关系抽象成一个个对象,通过对象之间的分工合作对现实世界进行模拟,这篇文章主要介绍了Javascript Object对象类型使用详解
2022-11-13

Javascript对象及Proxy工作原理详解

这篇文章主要为大家介绍了Javascript对象及Proxy工作原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-11-13

编程热搜

目录