如何Facebook的不断固定的页眉和页脚，同时加载不同的页面？ [英] How does Facebook keep the header and footer fixed while loading a different page?

问题描述

在通过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?

推荐答案

请参考如何风格它马克布里廷厄姆的答案，但我不认为这是你所要求的位置。我会给你它是如何工作的技术细节（以及为什么它是相当辉煌）。

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...

<一个href="http://www.facebook.com/profile.php?id=514287820&ref=profile">http://www.facebook.com/profile.php?id=514287820&ref=profile

这就是那个＆LT; A＆GT;标签指出。现在看一下地址栏，当你点击它...

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

<一个href="http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile">http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile

请注意，＃片段标识符/哈希？基本上，这证明你还没有离开的页面和previous请求是用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，你所要做的就是分配一个click事件处理程序，像这样......

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).

这篇关于如何Facebook的不断固定的页眉和页脚，同时加载不同的页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！