Question

在浏览Facebook页面时，页面加载之间的标题和固定页脚部分仍然可见，地址栏中的URL也会相应更改。至少，这是我得到的错觉。

Facebook在技术上如何实现这一目标？

Answer 1

请参阅Mark Brittingham关于如何设计它的答案，尽管我不认为这就是你在这里问的问题。我将向您提供有关其工作原理的技术细节（以及为什么它非常出色）。

当您将鼠标悬停在标题中的个人资料链接上时，请查看状态栏...

http://www.facebook.com/profile.php?id=514287820&ref=profile

那是＆lt; a＆gt;标签是指向的。现在查看地址栏时单击它...

http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile

注意“＃”fragment identifier/hash？这基本上证明你没有离开页面，之前的请求是用AJAX完成的。他们拦截这些链接上的点击事件，并用他们自己的东西覆盖默认功能。

要使用Javascript实现这一点，您所要做的就是为这些链接指定一个点击事件处理程序，如此...

var header = document.getElementById('header');
var headerLinks = header.getElementsByTagName('a');

for(var i = 0, l = headerLinks.length; i < l; i++) {
  headerLinks[i].onclick = function() {
    var href = this.href;

    //Load the AJAX page (this is a whole other topic)
    loadPage(href);  

    //Update the address bar to make it look like you were redirected
    location.hash = '#' + href;

    //Unfocus the link to make it look like you were redirected
    this.blur();

    //Prevent the natural HTTP redirect
    return false;
  }
}

这种方法的一个很好的好处是它允许后退按钮起作用（带有一些额外的诡计），这传统上是慢性AJAX使用的痛苦副作用。我不是百分之百确定这个技巧是什么，但我敢打赌它能够以某种方式检测浏览器何时修改片段标识符（可能每隔约500毫秒检查一次）。

作为旁注，将哈希值更改为在DOM中无法找到的值（通过元素ID）将页面一直滚动到顶部。要看看我在说什么：你从Facebook顶部向下滚动大约10个像素，露出顶部菜单的一半。单击其中一个项目，一旦片段标识符更新，它就会将其跳回到页面顶部（没有任何窗口重绘/重绘延迟）。

Answer 2

提供看似不变的页眉和页脚的一种方法是通过CSS - 这是固定页脚的示例（注意“position：fixed;”）：

#Footer  { 
  font-size:xx-small; 
  text-align:left; 
  width:100%; 
  bottom:0px; 
  position:fixed; 
  left:0px; 
  background-color: #CCCCCC; 
  border-top: 1px solid #999999; 
  padding:4px; 
  padding-right:20px; 
  color:#666666; 
}

您需要确保向页面div（填充页面主要部分的div）添加一些Margin-Bottom，以便为固定页脚留出空间（与使用Margin-Top的页眉相同）。

实际上不会停留在页面上，但由于定位非常紧凑且不变，因此除非您的页面加载时间过长，否则它看起来就像它一样。我不知道这是FaceBook的作用，但它会给你带来同样的效果。

Answer 3

嗯，完成这样的事情的方法是通过AJAX，但据我所知，facebook实际上并没有这样做...我只是检查，并像大多数网站一样刷新标题..

编辑：当我第一次回答这个问题时，我正在使用谷歌浏览器（2.0）查看Facebook，无论出于何种原因，它实际上并没有这样做 - >当我从主页点击我的个人资料时，它在地址栏中给我这个：http://www.facebook.com/profile.php?id=1304250071&ref=profile

然后刷新整个页面...奇怪

Answer 4

使用CSS绝对/固定定位，包含页眉和页脚的div标签可以位于HTML中的任何位置。就像在顶部！

在大多数当前的浏览器上都存在渲染延迟，我认为这是Firefox的四分之一秒，因此页面不会在快速闪烁中显示部分渲染的内容，并且随着网络数据的进入而浪费大量时间。

所以可能发生的是新页面快速返回包含样式和页眉和页脚的HTML。此内容可以由浏览器立即呈现，因此当它显示下一页时，它看起来好像没有更改。

如果页面生成动态内容，一个好方法是将所有静态信息放在顶部，输出并刷新数据缓冲区。然后进行动态数据库查询等。

Answer 5

增加Josh Stodola's答案：据我了解，YUI Bookmark Manager完成了这项工作。

在加载不同的页面时，Facebook如何保持页眉和页脚的固定？

5 个答案: