問題描述

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

這篇關于Facebook 如何在加載不同頁面時保持頁眉和頁腳固定?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！