历史状态管理是现代Web应用开发中的一个难点。在现代Web应用中,用户的每次操作不一定会打开一个全新的页面,因此“后退”和“前进”按钮也就失去了作用,导致用户很难在不同状态间切换。

要解决这个问题,首选使用

  • hashchange事件(第13章曾讨论过)。HTML5通过更新

  • history对象为管理历史状态提供了方便。

通过hashchange事件,可以知道URL的参数什么时候发生了变化,即什么时候该有所反应。而通过状态管理API,能够在不加载新页面的情况下改变浏览器的URL。为此,需要使用

  • history.pushState()方法,该方法可以接收三个参数:状态对象、新状态的标题和可选的相对URL。

例如:

history.pushState({name:"Nicholas"}, "Nicholas' page", "nicholas.html");

执行

  • pushState()方法后,新的状态信息就会被加入历史状态栈,而浏览器地址栏也会变成新的相对URL。

但是,浏览器并不会真的向服务器发送请求,即使状态改变之后查询location.href也会返回与地址栏中相同的地址。另外,第二个参数目前还没有浏览器实现,因此完全可以只传入一个空字符串,或者一个短标题也可以。而第一个参数则应该尽可能提供初始化页面状态所需的各种信息。

因为pushState()会创建新的历史状态,所以你会发现“后退”按钮也能使用了。按下“后退”按钮,会触发window对象的

  • popstate事件 。popstate事件的事件对象有一个

  • state属性,这个属性就包含着当初以第一个参数传递给pushState()的状态对象。

如:

EventUtil.addHandler(window, "popstate", function(event){
var state = event.state;
if (state){ //第一个页面加载时state为空
processState(state);
}
});

得到这个状态对象后,必须把页面重置为状态对象中的数据表示的状态(因为浏览器不会自动为你做这些)。记住,浏览器加载的第一个页面没有状态,因此单击“后退”按钮返回浏览器加载的第一个页面时,event.state值为null。

要更新当前状态,可以调用

  • replaceState(),传入的参数与pushState()的前两个参数相同。调用这个方法不会在历史状态栈中创建新状态,只会重写当前状态。

如:

history.replaceState({name:"Greg"}, "Greg's page");

支持HTML5历史状态管理的浏览器有Firefox 4+、Safari 5+、Opera 11.5+和Chrome。在Safari和Chrome中,传递给pushState()或replaceState()的状态对象中不能包含DOM元素。而Firefox支持在状态对象中包含DOM元素。Opera还支持一个history.state属性,它返回当前状态的状态对象。

本文转载于猿2048:JavaScript HTML5脚本编程——“历史状态管理”的注意要点

JavaScript HTML5脚本编程——“历史状态管理”的注意要点的更多相关文章

  1. javascript权威指南第16章 HTML5脚本编程

    <!DOCTYPE html> <html> <head> <script type="text/javascript" src=&quo ...

  2. 16. javacript高级程序设计-HTML5脚本编程

    1. HTML5脚本编程 l 跨文档消息传递API能够让我们在不降低同源策略安全性的前提下,在来至不同的域的文档间传递消息 l 原生拖放功能可以方便的指定某个元素是否可以拖动,并在放置时做出响应.还可 ...

  3. html5脚本编程

    (1)跨文档消息传递,XDM.指的是来自不同域的页面间传递消息. XDM的核心是postMessage();向另一个地方传递数据,指是包含在当前页面中的iframe元素,由当前页面弹出的窗口. var ...

  4. 《JavaScript高级程序设计》笔记:HTML5脚本编程(16)

    跨文档消息传递 跨文档消息传递(cross-document messaging),有时候简称为XDM,指的是在来自不同域的页面间传递消息.例如,www.wrox.com域中的页面与位于一个内嵌框架中 ...

  5. javascript学习 真正理解DOM脚本编程技术背后的思路和原则

    本文学习来源于<javascriptDOM编程艺术>仅作笔记 学会怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页. 循序渐进:从最核心的内容开始,逐步 ...

  6. javascript进阶——分离式DOM脚本编程

    编写分离式(unobstrusive)代码意味着对HTML内容的完全分离:数据来自服务器端,javascript代码用来动态化和交互.这种分离的好处是在不同浏览器之间使用是可以完全降级或升级运行,对于 ...

  7. JavaScript历史状态管理

    1.API (1)history.pushState:能够在不加载新页面的情况下改变浏览器的 URL history.pushState({name:"Nicholas"}, &q ...

  8. 翻译连载 |《你不知道的JS》姊妹篇 |《JavaScript 轻量级函数式编程》- 引言&前言

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 译者团队(排名不分先后):阿希.blueken.brucec ...

  9. Shell脚本编程30分钟入门

    Shell脚本编程30分钟入门 转载地址: Shell脚本编程30分钟入门 什么是Shell脚本 示例 看个例子吧: #!/bin/sh cd ~ mkdir shell_tut cd shell_t ...

随机推荐

  1. Qt:QListWidgetItem

    0.说明 一个QListWidgetItem是QListWidget中的一项(一行). 每个Item都可以持有多部分的信息,并将它们在适当时候展示出来. 在构造一个Item时指明它所在的List Wi ...

  2. Scrapy:用cmdline运行爬虫后导致主程序也结束——CrawlerProcesser

    学习自: Scrapy官方文档--CrawlerRunner相关 解决django或者其他线程中调用scrapy报ReactorNotRestartable的错误 - liuxianglong - 博 ...

  3. Python:序列化 pickle JSON

    序列化 在程序运行的过程中,所有的变量都储存在内存中,例如定义一个dict d=dict(name='Bob',age=20,score=88) 可以随时修改变量,比如把name修改为'Bill',但 ...

  4. JDK下载安装与环境变量配置【全网最新】

    1.下载安装JDK 下载地址:(https://www.oracle.com/java/technologies/downloads/) 最好选择解压版,解压即可(说删就删) 解压:例如我解压目录为 ...

  5. Mysql 8.0 配置主从备份

    my.ini文件的位置 mysql 8.0安装完过后没有my.ini疑惑了我好久,最后发现,配置文件在,C盘的一个隐藏文件夹里面 具体路径如下图 主库配置 修改主库INI文件 在[mysqld]节点添 ...

  6. HTML 基础及超链接练习

    实验一:HTML 基础及超链接练习 实验目的: 熟悉 HTML 基础及超链接的使用 实验要求: 1.建立至少 3 个以上的网页: 2.实现任意两网页之间的跳转(建议做个导航菜单): 3.每个网页里面至 ...

  7. VuePress 博客之 SEO 优化(二)重定向

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...

  8. hadoop学习笔记 一

    Hadoop 2.x * common * HDFS 存储数据 NameNode 主从结构 * 存储文件系统的元数据,命名空间namespace DataNode * 存储数据 SecondaryNa ...

  9. SQL Server 2008安全加固手册

    1.身份鉴别 1.1避免使用空密码和弱口令 要求:应对登录操作系统和数据库系统的用户进行身份标识和鉴别. 目的:操作系统和数据库系统管理用户身份鉴别信息应具有不易被冒用的特点,口令应有复杂度要求并定期 ...

  10. [SHA2017](web) writeup

    [SHA2017](web) writeup Bon Appétit (100) 打开页面查看源代码,发现如下 自然而然想到php伪协议,有个坑,看不了index.php,只能看 .htaccess ...