JavaScript历史对象举例分析

　　介绍

这篇文章主要介绍“JavaScript 历史对象举例分析”,在日常操作中,相信很多人在JavaScript 历史对象举例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答“JavaScript 历史对象举例分析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

JavaScript历史对象举例分析

<强>前言:

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

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

1,路由导航

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

, history.go(1);//,后退一页//history.go(1)、前进一页//history.go(2)、前进两页,//去(),有两个简写方法:,回(),和(),向前。 　　 　　history.back();//,后退一页 　　 　　history.forward();//前进一页

<代码> 对历史象还有一个长度<代码> 属性,<代码>历史。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.长度。

& lt; body> 　　& lt;才能button  onclick=癶andleNext(),在点我到下一页& lt;/button> & lt; br> 　　& lt;才能button  onclick=癶andleLast(),在点我到上一页& lt;/button> & lt; br> 　　& lt;才能script> 　　,,,window.onload =, function  (), { 　　,,,,,console.log (window.history); 　　,,,} 　　,,,window.addEventListener (& # 39; hashchange& # 39;,, function  (), { 　　,,,,,console.log(& # 39;从而hash  has 改变! & # 39;) 　　,,,},,假); 　　,,,window.addEventListener (& # 39; popstate& # 39;,,(事件),=祝辞,{ 　　,,,,,console.log(“位置:,“,+,document.location  +,,,,:,“, +, JSON.stringify (event.state)); 　　,,,}); 　　,,,function  handleNext (), { 　　,,,,,const  state =,{,标识:“1234”;,,页面:,“2“,} 　　,,,,,const  title =, & # 39;二& # 39; 　　,,,,,const  url =, & # 39; page2.html& # 39; 　　,,,,,window.history.pushState(标题、状态,还以为;url) 　　,,,,,console.log (window.history); 　　,,,} 　　,,,function  handleLast (), { 　　,,,,,const  state =,{,标识:“1234”;,,页面:,“21“,} 　　,,,,,const  title =, & # 39;一& # 39; 　　,,,,,const  url =, & # 39; page21.html& # 39; 　　,,,,,window.history.replaceState(标题、状态,还以为;url) 　　,,,,,console.log (window.history); 　　,,,} 　　& lt;才能/script> 　　null

JavaScript历史对象举例分析