history对象

Posted 2020-11-22 yourdid

浏览器窗口有一个history对象，用来保存浏览历史。如果当前窗口先后访问了3个网址，那么history对象就包括三项，history.length属性=3

history对象提供了一系列方法，允许在浏览历史之间移动。具体说明如下

back():移动到上一个访问页面，等同于浏览器的后退键

forward():移动到下一个访问页面，等同于浏览器的前进键

go():接受一个整数作为参数，移动到该整数指定的页面，如go(1)相当于forward(),go(-1)相当于back()

如果移动的位置超出了访问历史的边界，以上3个方法并不报错，而是默默失败

history.go(0)相当于刷新当前页面。如：

history.go(0)

常用的“返回上一页”连接，代码如下：

docuement.getElementById(‘backLink‘).onclick=function()

{

window.history.back();

}

实现无刷新浏览：

html5为history对象添加了两个新方法，history.pushState()和history.replaceState(),用来在历史中添加和修改记录，用法如下：

if(!!(window.history&&history.pushState))

{

//支持History API

}

else

{

//不支持

}

上述代码可以用来检查，当前浏览器是否支持History API.如果不支持，可以考虑使用polyfill库的History.js

1.history.pushState()

此方法接受3个参数，依次如下：

state:一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null

title:新页面的标题，但是所有的浏览器目前都忽略这个值，因此这里可以填null

url:新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

var stateObj={foo:"bar"};

history.pushState(stateObj,‘page2‘,‘2.html‘)

添加上面这个新记录后，浏览去地址栏立刻显示example.com/2.html,但并不会跳转到2.html，甚至也不会检查2.html是否存在，它只是成为浏览历史中的最新记录。这时在地址栏输入一个新的地址，如访问google.com，然后单击倒退按钮，页面的URL讲显示2.html;再单击一次倒退按钮，URL将心事1.html

总之，pushState()方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应。

如果pushState的url参数设置了一个新的锚点值（即hash）,并不会触发hashchange事件。如果设置了一个跨域网址，则会报错，这样设计的目的是，防止恶意代码让用户以为他们是在另一个网站上。

2.history.replaceState()

history.replaceState()方法的参数与pushState()方法一模一样，区别是它修改浏览历史中的当前记录。例如，当前网页是example.com/example.html

history.pushState({page:1},‘title 1‘,‘?page=1‘);

history.pushState({page:2},‘title 2‘,‘?page=2‘);

history.replaceState({page:3},‘title 3‘,‘?page=3‘)

history.back()            //url显示为http://example.com/example.html?page=1

history.back()            //url显示为http://example.com/example.html

3.history.state 属性

history.state属性返回当前页面的state对象。例如：

history.pushState({page:1},‘title 1‘,‘?page=1‘)

history.state// {page:1}

4.popstate事件

每当同一个文档的浏览历史（history对象）出现变化时，就会触发popstate事件

注意：仅仅调用pushState()方法或replaceState（）方法时，并不会触发该事件，只有用户单击浏览器倒退按钮和前进按钮，或者使用javascript调用back,forward,go方法时才会触发。另外该事件只针对同一个文档，如果通过“浏览历史列表”的信息来加载不同的文档，该事件也不会被触发。

使用时，可以为popstate事件指定回调函数

window.onpopstate=function(event)

{

console.log(‘location:‘+document.location);

console.log(‘state:‘+JSON.stringify(event.state));

}

//或者

window.addEventListener(‘popstate‘,function(event)

{

console.log(‘location‘:document.location);

console.log(‘state:‘+JSON.stringify(event.state));

})

var currentState=history.state;

关于这个属性   也有一些理论  详情看书

5.URLSearchParams API

URLSearchParams API用于处理URL中的查询字符串，即问号之后的部分。没有部署这个PI的浏览器，可以用url-search-params这个垫片库。

例如：

var paramsString=‘q=URLUtils.searchParams&topic‘;

var searchParams=new  URLSearchParams(paramsString);

URLSearchParams有以下的方法，用来操作某个函数

URLSearchParams有以下方法，用来操作某个参数。

has():返回一个布尔值

get():返回指定参数的第一个值

getAll():返回一个数组，成员是指定参数的所有值

set():设置指定参数

delete():删除指定参数

append():在查询字符串中，追加一个键值对

toString():返回整个查询字符串

URLSearch还有3个方法，用来遍历所有参数

keys():遍历所有参数名

values():遍历所有参数值

entries():遍历所有参数的键值对

URLSearchParams还有3个方法，用来遍历所有参数。

keys():遍历所有参数名

values():遍历所有参数值

entries():遍历所有参数的键值对

var searchParams=new URLSearchParams(‘key1=value1&key2=value2‘);

for(var key of searchParams.keys())

{

console.log(key);

}

//key1

//key2

for(var value of searchParams.values())

{

console.log(value);

}

//value1

//value2

for(var pair of searchParams.entries（））

{

console.log(pair[0]+‘,‘+pair[1]);

}

//key1,value1

//key2,value2