问题描述

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

When browsing through Facebook pages the header and fixed footer section remain visible between page loads AND the URL in the address bar changes accordingly. At least, that's the illusion I get.

从技术上讲，Facebook 如何做到这一点?

How does Facebook achieve that technically speaking?

推荐答案

请参阅 Mark Brittingham 的答案以了解如何设置它的样式，尽管我认为这不是您在这里要问的.我将为您提供有关它如何工作的技术细节(以及为什么它相当出色).

Refer to Mark Brittingham's answer for how to style it, although I don't think that is what you are asking here. I will give you the technical details on how it works (and why it is fairly brilliant).

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

Take a look at the status bar when you hover over the Profile link in the header...

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

这就是<a>标签被指向.现在点击地址栏看看...

That is where that <a> tag is pointed to. Now look at the address bar when you click it...

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

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

Notice the "#" fragment identifier/hash? This basically proves that you haven't left the page and the previous request was made with AJAX. They are intercepting the click events on these links, and overriding the default functionality with something of their own.

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

To make this happen with Javascript, all you have to do is assign a click event handler to those links like so...

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 毫秒检查一次).

One fabulous benefit to this approach is that it allows the back button to be functional (with a little added trickery), which has traditionally been a painful side effect of chronic AJAX usage. I'm not 100% sure of what this trickery is, but I bet it's somehow able to detect when the browser modifies the fragment identifier (possibly by checking it every ~500 milliseconds).

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

As a side note, changing the hash to a value that can't be found within the DOM (via element ID) will scroll the page all the way to the top. To see what I'm talking about: you scroll down about 10 pixels from the top of Facebook, exposing half of the top menu. Click on one of the items, it will jump it back up to the top of the page as soon as the fragment identifier gets updated (without any window repaint/redraw delay).