History对象

简介: History对象

正文


  1. Html5 使用 history 对象 history.pushState() 和 history.replaceState() 方法添加和修改浏览历史记录,这里


  1. 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)


  1. history.pushState(object state, string title, string url) 方法能实现在不刷新页面的情况下修改浏览器 url 链接,并且该方法创建了新的浏览记录,并将新的链接插入到浏览记录队列中。


state:一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。
       如果不需要这个对象,此处可以填null。新页面里可以通过 window.history.state 获取。
title:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null。
url:新的网址,必须与当前页面处在同一个域,否则报错(不支持跨域)。浏览器的地址栏将显示这个网址。
     不允许跨域的目的是,防止恶意代码让用户以为他们是在另一个网站上。
     假如设置了一个新的锚点值(即hash),并不会触发hashchange事件。


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


  1. history.replaceState 方法的参数与 pushState 方法一模一样,区别是它修改浏览历史中当前纪录。


  1. 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));
};


其他


  1. 获取URL, 从输出结果上,document.URLwindows.location.href 没有区别。 非要说区别的话,你只可以读取 document.URL 的值,不能修改它。windows.location.href 的值你即可以读取也可以修改。 windows.location.href 是旧的写法,新的标准推荐用 document.URL 替代。(如果你只是读取的话)


document.location.href
window.location.href
document.URL    // 只读


参考:


  1. javascript History对象详解,这里
  2. history禁用浏览器的后退功能(包括其他操作后退的按钮,操作等),这里
目录
相关文章
|
JSON 测试技术 数据处理
iOS-底层原理 35:组件化(一)方案
iOS-底层原理 35:组件化(一)方案
1442 0
iOS-底层原理 35:组件化(一)方案
|
Windows
Windows系统 services.msc命令详解,Windows命令行查看本地服务
第一步、打开cmd 按下 win 键,输入 cmd 后回车,打开「命令提示符」
1462 0
Windows系统 services.msc命令详解,Windows命令行查看本地服务
|
1月前
|
数据采集 数据可视化 物联网
数据工程师必看:10大主流数据清洗工具全方位功能对比
面对杂乱数据,高效清洗是分析关键。本文盘点10款主流工具:从企业级Informatica、Talend,到业务友好的Alteryx、Tableau Prep,技术向的Python、Nifi,再到轻量级Excel+Power Query,覆盖各类场景。帮你选对工具,提升效率,告别无效加班。
数据工程师必看:10大主流数据清洗工具全方位功能对比
|
监控 安全 数据安全/隐私保护
|
SQL Oracle 关系型数据库
DBeaver,一款好用的开源数据库管理软件
DBeaver,一款好用的开源数据库管理软件
421 3
【收藏】常见WinXP启动故障及解决方法
【收藏】常见WinXP启动故障及解决方法
|
SQL 运维 关系型数据库
OBProxy 路由策略与使用运维-路由实现
OBProxy 路由策略与使用运维-路由实现
258 0
|
SQL 算法 数据可视化
LeetCode题目92:反转链表ll 【python 递归与迭代方法全解析】
LeetCode题目92:反转链表ll 【python 递归与迭代方法全解析】
|
JSON Android开发 开发者
构建高效Android应用:采用Kotlin协程优化网络请求
【5月更文挑战第31天】 在移动开发领域,尤其是针对Android平台,网络请求的管理和性能优化一直是开发者关注的焦点。随着Kotlin语言的普及,其提供的协程特性为异步编程提供了全新的解决方案。本文将深入探讨如何利用Kotlin协程来优化Android应用中的网络请求,从而提升应用的响应速度和用户体验。我们将通过具体实例分析协程与传统异步处理方式的差异,并展示如何在现有项目中集成协程进行网络请求优化。
|
安全 Shell API
技术心得记录:恶意代码功能与应对
技术心得记录:恶意代码功能与应对
238 0