无缝页更改与AJAX [英] Seamless Page Changing with AJAX

问题描述

我试图让我的网站的网页加载的无缝连接。如果你点击一些你下面的链接的页面会明白我在说什么。

I'm trying to make my website pages load seamlessly. If you click a page on some of the links below you will see what I'm talking about.

http://www.ultranoir.com/

http://www.itsmassive.com/

当你点击它加载的信息和/＃链接！/被添加到URL。如何添加这个功能让我的网页加载同样的方式？是否有一个教程哪儿了吗？

when you click on the link it loads the information and /#!/ is added to the url. How do I add this feature so my pages load the same way? Is there a tutorial anywhere?

推荐答案

这就是所谓的 hashchange 事件。您可以在＃更改值！无需刷新页面，则可以使用AJAX来加载所需的信息。如果你正在使用支持HTML5的一个新的浏览器，那么你可以使用 History.pushState 更改URL栏以类似的方式。

This is called a hashchange event. You can change the value after the #! without reloading the page, then you can use AJAX to load the info you want. If you're using a new browser that supports HTML5, then you can use History.pushState to change the url bar in a similar way.

基本上，你添加一个事件的联系，更改URL（使用的location.hash 或 pushState ） ，然后你就可以你通过AJAX加载数据。

Basically, you add an event to the links, change the URL (using location.hash or pushState), and then you can you load the data via AJAX.

这里是的location.hash ，这里$ C $是之一 pushState 。

有关良好的跨浏览器解决方案，我建议 History.js 。

For a good cross-browser solution, I suggest History.js.

如果你想使用History.js，添加脚本到页面后，你需要添加一些JavaScript了。

If you want to use History.js, after adding the scripts to your page, you need to add a bit of JavaScript too.

$('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
       });
});

这篇关于无缝页更改与AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！