资讯专栏INFORMATION COLUMN

HTML5历史管理状态机制

Sunxb / 2977人阅读

摘要:同时介绍两个相关的和个事件。两个此会在历史状态栈中添加一条记录。接受个参数第一个详尽的状态信息。提供给事件的事件对象的属性第二个新状态的标题,目前没有浏览器实现,可以传空字符串第三个相对。

前言:想要不刷新页面同时改变url 可以用HTML5 window对象的 hashChange 事件。同时介绍两个相关的api 和 1个事件。

两个API:
1.
history.pushState({name:"blog"},"","blog.html");此api会在history历史状态栈中添加一条记录。‘前进’ ‘后退’按钮可使用,并触发popstate事件。
接受3个参数:
第一个:详尽的状态信息。提供给popstate 事件的 事件对象的state属性(event.state );
第二个:新状态的标题,目前没有浏览器实现,可以传空字符串
第三个:相对url。(如果传入的地址是绝对地址,要求不能跨域,否则浏览器报错)

2.
与之相反的是另外一个api
history.repalceState({name:"blog"},"","blog.html");参数同此pushState 一样,唯一的区别是api不会在history历史状态栈中添加一条记录,只会重新当前状态。

一个事件
window 对象的 popstate事件,在按下‘前进’ ‘后退’按钮并触发。

小贴士:
在用pushState 创造‘假’url时,请确保 Web服务器上有一个真实存在的url与之对应。 否则刷新页面时会报 404错误。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52661.html

相关文章

  • HTML5历史管理状态机制

    摘要:同时介绍两个相关的和个事件。两个此会在历史状态栈中添加一条记录。接受个参数第一个详尽的状态信息。提供给事件的事件对象的属性第二个新状态的标题,目前没有浏览器实现,可以传空字符串第三个相对。 前言:想要不刷新页面同时改变url 可以用HTML5 window对象的 hashChange 事件。同时介绍两个相关的api 和 1个事件。 两个API:1.history.pushState({...

    amuqiao 评论0 收藏0
  • JavaScript HTML5脚本编程——“历史状态管理”的注意要点

    摘要:历史状态管理是现代应用开发中的一个难点。通过更新对象为管理历史状态提供了方便。而通过状态管理,能够在不加载新页面的情况下改变浏览器的。在和中,传递给或的状态对象中不能包含元素。还支持一个属性,它返回当前状态的状态对象。 历史状态管理是现代Web应用开发中的一个难点。在现代Web应用中,用户的每次操作不一定会打开一个全新的页面,因此后退和前进按钮也就失去了作用,导致用户很难在不同状态间切...

    Rainie 评论0 收藏0
  • 面试题集锦(一)

    摘要:破坏程序的异常处理机制。创建后,会把关联的通过添加到响应头部中。我又问实习生在咱们团队都做什么,他说一般不把实习生当实习生看,就跟团队一起做项目,这样成长的更快简写了,大概就是这个意思你接下来有什么打算走进阿里,哈哈 阿里一面 岗位:web前端开发1 从技术的角度来介绍一下自己回答:大家可以从这样几个方面来介绍自己: 如何学习:学习经历为主,掌握了哪些语言,如何学习...

    rottengeek 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<