使用AJAX更改无缝页面

Question

我正在努力让我的网站页面无缝加载。如果您点击下面某些链接上的页面，您将看到我在说什么。

http://www.ultranoir.com/

http://www.itsmassive.com/

当您点击链接时，它会加载信息并将/＃！/添加到网址中。如何添加此功能以使我的页面加载方式相同？在任何地方都有教程吗？

Answer 1

这称为hashchange事件。您可以在#!之后更改值而无需重新加载页面，然后您可以使用AJAX加载所需的信息。如果您使用的是支持HTML5的新浏览器，则可以使用History.pushState以类似的方式更改网址栏。

基本上，您向链接添加事件，更改URL（使用location.hash或pushState），然后您可以通过AJAX加载数据。

Here是location.hash的一个不错的例子，pushState是$('a.hash').click(function(e){ // For all links with the class "hash" e.preventDefault(); // Don't follow link History.pushState(null, '', this.href); // Change the current URL (notice the capital "H" in "History") $('#content').slideUp('slow', function(){ // Animate it sliding up var $this = $(this); $this.load(this.href, function(){ // Use AJAX to load the page (or do whatever) $this.slideUp('slow'); // Slide back down }); }); 的一个很好的例子。

对于一个好的跨浏览器解决方案，我建议and here's。

如果您想使用History.js，在将脚本添加到页面后，您还需要添加一些JavaScript。

{{1}}