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

Question

浏览 Facebook 页面时，页眉和固定页 footer 分在页面加载之间保持可见，并且地址栏中的 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

注意“#”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 的痛苦副作用。我不是 100% 确定这个诡计是什么，但我敢打赌它能够以某种方式检测浏览器何时修改片段标识符(可能通过每大约 500 毫秒检查一次)。

作为旁注，将散列更改为无法在 DOM 中找到的值(通过元素 ID)将使页面一直滚动到顶部。看看我在说什么:您从 Facebook 顶部向下滚动大约 10 个像素，露出顶部菜单的一半。单击其中一项，它会在片段标识符更新后立即将其跳回页面顶部(没有任何窗口重绘/重绘延迟)。