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

问题描述

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

Facebook在技术上如何实现？

解决方案

马克·布莱辛厄姆（Mark Brittingham）的答案是怎么样的，虽然我不认为这是你在这里问的。我会给你关于它如何工作的技术细节（为什么它是相当辉煌的）。

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

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

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

http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile <注意＃片段标识符/散列？这基本上证明你没有离开页面，并且以前的请求是使用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; 
 
 //加载AJAX页面（这是一个完整的其他主题）
 loadPage（href）; 
 
 //更新地址栏，使其看起来像被重定向
 location.hash ='＃'+ href; 
 
 //取消聚焦链接，使其看起来像被重定向
 this.blur（）; 
 
 //防止自然的HTTP重定向
 return false; 
} 
} 
  

这种方法的一个神话般的好处是它允许后退按钮功能（有一点添加诡计），这是传统上是慢性AJAX使用的痛苦的副作用。我不是100％肯定这个诡计是什么，但我敢打赌，它是以某种方式能够检测何时浏览器修改片段标识符（可能通过检查每个约500毫秒）。

作为附注，将散列更改为DOM（通过元素ID）中无法找到的值将将页面滚动到顶部。看到我在说什么：从Facebook顶部向下滚动约10像素，显示一半的顶级菜单。点击其中一个项目，只要片段标识符被更新（不需要任何任何窗口重新绘制/重绘延迟），它就会将其返回到页面顶部。

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.

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

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

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

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.

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;
  }
}

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

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屋！