History对象
2020-01-05 本文已影响0人
越前君
本文更新于 2020-04-22。
-
Html5 使用 history 对象 history.pushState() 和 history.replaceState() 方法添加和修改浏览历史记录，这里。
-
History 对象提供的方法有：
1. back()：移动到上一个访问页面，等同于浏览器的后退键。
2. forward()：移动到下一个访问页面，等同于浏览器的前进键。
3. go()：接受一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forward()，go(-1)相当于back()。
history.go(0) 或 history.go() 相当于刷新当前页面。
注意：如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是默默的失败。
注意：返回上一页时，页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新的网页。
4. 其中 pushState()、replaceState() 是 HTML 5 新增的方法，用来在浏览历史中添加和修改记录。
判断是否支持 pushState 方法：!!(window.history && history.pushState)
-
history.pushState(object state, string title, string url)方法能实现在不刷新页面的情况下修改浏览器 url 链接，并且该方法创建了新的浏览记录，并将新的链接插入到浏览记录队列中。
state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。
如果不需要这个对象，此处可以填null。新页面里可以通过 window.history.state 获取。
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域，否则报错（不支持跨域）。浏览器的地址栏将显示这个网址。
不允许跨域的目的是，防止恶意代码让用户以为他们是在另一个网站上。
假如设置了一个新的锚点值（即hash），并不会触发hashchange事件。
-
总之，pushState 方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应。
-
history.replaceState 方法的参数与 pushState 方法一模一样，区别是它修改浏览历史中当前纪录。
-
popstate 事件：
每当同一个文档的浏览历史(即 history 对象)出现变化时，就会触发 popstate 事件
需要注意的是，仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用javascript调用back()、forward()、go()方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发
// event.state，就是通过pushState和replaceState方法，为当前URL绑定的state对象，可以通过 history.state 获取
window.onpopstate = function (event) {
console.log(‘location: ‘ + document.location);
console.log(‘state: ‘ + JSON.stringify(event.state));
};
其他
- 获取URL， 从输出结果上，
document.URL和windows.location.href没有区别。 非要说区别的话，你只可以读取document.URL的值，不能修改它。windows.location.href的值你即可以读取也可以修改。windows.location.href是旧的写法，新的标准推荐用document.URL替代。（如果你只是读取的话）
document.location.href
window.location.href
document.URL // 只读
