小编典典

使用AJAX进行无缝页面更改

ajax

我正在尝试使我的网站页面无缝加载。如果单击下面某些链接上的页面,您将看到我在说什么。

http://www.ultranoir.com/

http://www.itsmassive.com/

当您单击链接时,它将加载信息,并且/#!/添加到URL。如何添加此功能,以便页面以相同的方式加载?哪里有教程?


阅读 193

收藏
2020-07-26

共1个答案

小编典典

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

基本上,您可以向链接添加事件,更改URL(使用location.hashpushState),然后可以通过AJAX加载数据。

这里是一个不错的例子location.hash而这里的一个pushState

对于一个好的跨浏览器解决方案,我建议使用History.js

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

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