在加载其他页面时，Facebook如何保持页眉和页脚固定？

Question

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

从技术上来讲，Facebook如何实现这一目标？

Answer 1

有关样式的设置，请参考Mark Brittingham的答案，尽管我认为这不是您要的。我将为您提供有关其工作原理的技术细节（以及为何如此出色）。

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

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

那就是标签所指向的地方。现在，当您单击它时查看地址栏…

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

注意“＃”
片段标识符/哈希吗？这基本上证明您尚未离开页面，并且先前的请求是使用AJAX进行的。他们正在拦截这些链接上的click事件，并使用自己的东西覆盖默认功能。

要使用Javascript做到这一点，您所需要做的就是为这些链接分配一个click事件处理程序，如下所示：

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的痛苦副作用。我不是100％知道这是什么骗术，但我敢打赌，它可以某种方式检测到浏览器何时修改了片段标识符（可能每500毫秒检查一次）。

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