HTML5:改变浏览器url而不刷新页面

新万博ManBetX官网在线
2010年7月20日

这个新特性提供了一种方法,可以通过javascript改变浏览器中显示的URL *,而无需重新加载页面。它还会创建一个后退按钮事件,你甚至有一个可以交互的状态对象。

这意味着如果您想要将状态添加到ajax应用程序中,您将不再需要使用散列hack,并且搜索引擎也将能够索引您的页面。

那么它是如何工作的呢?这很简单。在Chrome中你可以这样写:

window.history。pushState("对象或字符串"," Title ", " /new-url ");

执行这行代码将把URL更改为my-domain.com/new-url(第三个选项)。“Title”字符串(第二个选项)用于描述新状态和将要如预期的那样更改文档的标题。的W3文档状态:

与会话历史记录条目相关的标题不需要与文档的当前标题有任何关系。会话历史条目的标题旨在解释文档当时的状态,以便用户可以导航文档的历史。”

因此,如果您希望更改文档标题以匹配历史条目的标题,则需要为此编写一个钩子(提示:只需将一个函数绑定到onpopstate事件)。最后,“对象或字符串”(第一个选项)是一种将对象传递到状态的方法,然后您可以使用该状态来操作页面。

你可以通过运行以编程方式调用back函数:

window.history.back ();

当然你也可以往前看:

window.history.forward ();

或者甚至去一个特定的历史状态:

window.history.go (2);

作为第一个选项传递给pushState函数的对象将与每个状态保持一致,因此如果返回历史,您将获得该状态的对象。如果你需要操作一个状态(而不是创建一个新状态),你可以使用:

window.history。replaceState(" object or string ", " Title ", " /another-new-url ");

请注意,虽然这将改变页面的URL,但它确实会允许用户单击后退按钮返回到上一个状态,因为您正在替换当前状态,而不是添加一个新状态。所以,这是正确的行为。

我个人认为URL应该是第一个参数,然后其他两个选项应该是可选的。无论如何,这个特性在使用需要状态(可书签页面和后退按钮支持)的AJAX和flash应用程序时肯定会很方便。任何想让自己的Flash或ajax应用程序可以被搜索引擎索引的人,都应该看看这个新功能,这样他们在谷歌和喜欢上的排名就会更好。

我所见过的这个html5特性的最显著实现是在新的Flickr布局中。这里有一个示例页面(如果还没有启用新布局,请记住启用)。现在,如果你使用的是最新版本的Chrome或Safari浏览器,点击其中一个,比如“Strobist”,它会滑动打开,URL会改变,但你会注意到页面不会重新加载。

值得注意的是,Flickr使用的是replaceState而不是pushState——换句话说,他们没有添加后退按钮事件。我猜他们觉得之间来回切换开启/关闭集太小改变后退按钮事件(我当然同意他们的决定),所以他们只是替换URL如果你复制/粘贴链接到一个朋友,他们将会看到相同的页面,你做到了。

另一个有趣的事情是,如果你运行的浏览器不支持这种新的html5特性,Flickr仍然使用旧的哈希hack作为退路。我预测/希望许多帮助你轻松实现哈希hack的插件将把这一点融入它们的核心,这样使用新浏览器的人就可以开始获得好处。

最新版本的Chrome和Safari已经支持“onpopstate”,Firefox 4也将支持它。不幸的是,如果我们相信的话,IE9似乎不会支持这个特性维基百科的这篇文章(“Trident”是IE的布局引擎)。

检查W3规范更多信息。

*出于安全原因,你只能改变URL的路径,而不是域名本身。所以您可以在my-domain.com/[change-the-stuff-here.html]之后更改URL中的任何内容。

新万博ManBetX官网在线