h5中history.pushState()如何使用

小编给大家分享一下h5中history.pushState()如何使用,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

<强>在HTML文件中,,history.pushState()方法向浏览器历史添加了一个 <强>状态 <强>。

pushState()带有三个参数:<强>一个状态对象,一个标题(现在被忽略了),以及一个可选的URL地址强。下面将对这三个参数进行细致的检查:

<强>状态对象——状态对象是一个由pushState()方法创建的,与历史纪录相关的JS对象。当用户定向到一个新的状态时,会触发popstate事件。事件的州属性包含了历史纪录的状态对象。(译者注:总而言之,它存储JSON字符串,可以用在popstate事件中)状态对象可以是任何可以序列化的东西。由于火狐会将这些对象存储在用户的磁盘上,所以用户在重启浏览器之后这些国家对象会恢复,我们施加一个最大640 k的字符串在国家对象的序列化表示上。如果你像pushState()方法传递了一个序列化表示大于640 k的状态对象,这个方法将扔出一个异常。如果你需要更多的空间,推荐使用sessionStorage或者localStorage。

<强>标题——火狐浏览器现在已经忽略此参数,将来也许可能被使用。考虑到将来有可能的改变,传递一个空字符串是安全的做法。当然,你可以传递一个短标题给你要转变成的状态。(译者注:现在大多数浏览器不支持或者忽略这个参数,最好用零代替)

<强> URL,这个参数提供了新历史纪录的地址。请注意,浏览器在调用pushState()方法后不会去加载这个URL,但有可能在之后会这样做,比如用户重启浏览器之后,新的URL不一定要是绝对地址,如果它是相对的,它一定是相对于当前的URL。新URL必须和当前URL在同一个源下,否则,pushState()将丢出异常。这个参数可选,如果它没有被特别标注,会被设置为文档的当前URL。

注意:在壁虎2.0(火狐4/雷鸟3.3/SeaMonkey 2.1)到壁虎5.0 (Firefox 5.0/雷鸟5.0/SeaMonkey 2.2)中,传输的对象序列化使用JSON。从壁虎6.0 (Firefox 6.0/雷鸟6.0/SeaMonkey 2.3)开始,该对象使用,结构化克隆算法(结构式克隆算法?)进行序列化。这将允许传输更加多样的对象。

一些情况下,调用pushState和设置窗口。位置=? foo"相当,这种状况下,这两种行为都会创建和激活另一个和当前页面有关的历史纪录。

<强>但是pushState()有其他优势:

新URL可以是当前URL同源下的任意地址。相反的,设置window.location会让你保持在相同页面,除非你只修改哈希。

如果不必要,你可以不改变URL,相反的,将window.location设定为“# foo”;只会创建一个新的历史纪录,如果当前散列不为# foo。

你可以将任意数据与新的历史条目。对于基于散列的方法,你需要将所有相关数据编码到一个短的字符串。你可以关联任意的数据到你的新历史纪录中。使用基于散列的方法,你需要将所有相关的数据编码为一个短字符串。

请注意pushState()方法绝不会导致hashchange事件被激活,即使新的URL和旧的只在散列上有区别。

在XUL中,它会创建一个特殊的XUL元素。

在其他文档中,则会创建一个空的URI命名空间。

<>强语法编辑