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

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

注意"#" 片段标识符/哈希？这基本上证明你没有离开页面,之前的请求是用AJAX完成的.他们拦截这些链接上的点击事件,并用自己的东西覆盖默认功能.

要使用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使用的痛苦副作用.我不是百分之百确定这个技巧是什么,但我敢打赌它能够以某种方式检测浏览器何时修改片段标识符(可能每隔约500毫秒检查一次).

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