HTML5历史管理状态机制

amuqiao 发布于2019-08-22 18:46 / 3185人阅读

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

前言：想要不刷新页面同时改变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/96181.html

HTML5历史管理状态机制

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

Sunxb 2019-08-02 10:56 评论0 收藏0
JavaScript HTML5脚本编程——“历史状态管理”的注意要点

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

Rainie 2019-08-19 17:36 评论0 收藏0
面试题集锦（一）

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

rottengeek 2019-08-21 17:47 评论0 收藏0