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

Posted 2023-04-13

【中文标题】Facebook 如何在加载不同页面时保持页眉和页脚固定？

【英文标题】：How does Facebook keep the header and footer fixed while loading a different page?

【发布时间】：2010-10-14 16:23:26

【问题描述】：

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

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

【问题讨论】：

Facebook 正在为我刷新整个页面...

只是一种错觉。他们真的很快，仅此而已。

不，这不是幻觉。

@Jim Soho 他们使用 ajax 来 1. 清除除导航栏以外的 div 的整个页面和 2. 从 externamlpage 加载 div 到其中

【参考方案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 个像素，露出顶部菜单的一半。单击其中一个项目，它会在片段标识符更新后立即将其跳回到页面顶部（没有任何窗口重绘/重绘延迟）。

【讨论】：

谢谢乔希，这就是我在看它时错过的，它使用了哈希技巧。

优秀且解释清楚的回答乔希。谢谢:)

是的，听起来有点像他们在做这样的事情：contentwithstyle.co.uk/content/…

【参考方案2】：

提供看起来不变的页眉和页脚的一种方法是通过 CSS - 这是一个固定页脚的示例（注意“位置：固定;”）：

#Footer   
  font-size:xx-small; 
  text-align:left; 
  width:100%; 
  bottom:0px; 
  position:fixed; 
  left:0px; 
  background-color: #CCCCCC; 
  border-top: 1px solid #999999; 
  padding:4px; 
  padding-right:20px; 
  color:#666666; 

您需要确保将一些 Margin-Bottom 添加到页面 div（填充页面主要部分的那些），以便为固定页脚留出空间（与使用 Margin-Top 的页眉相同）。

这确实不实际上停留在页面上，但是，因为定位是如此紧凑和不变，除非您的页面加载时间过长，否则它看起来好像确实如此。我不知道这是否是 FaceBook 所做的，但它会给你带来几乎相同的效果。

【参考方案3】：

使用 CSS 绝对/固定定位，包含页眉和页脚的 div 标签可以位于 html 中的任何位置。喜欢在顶部！

在大多数当前的浏览器上都有一个渲染延迟，我相信 Firefox 为四分之一秒，因此页面不会在快速闪烁中显示部分渲染的内容，并且会浪费大量时间来绘制网络数据。

所以可能发生的情况是新页面快速返回包含样式以及页眉和页脚的 HTML。浏览器可以立即呈现此内容，因此当它显示下一页时，就好像这些内容没有改变一样。

如果页面正在生成动态内容，一个很好的技巧是将所有静态信息放在顶部，输出并刷新数据缓冲区。然后进行动态数据库查询等。

【参考方案4】：

嗯，完成这样的事情的方法是通过 AJAX，但据我所知，Facebook 实际上并没有这样做......我刚刚检查过，它像大多数网站一样刷新标题.. .

编辑：当我第一次回答这个问题时，我正在使用 Google Chrome (2.0) 查看 Facebook，无论出于何种原因，它实际上并没有这样做-->当我从主页单击我的个人资料时，它在地址栏中给我这个：http://www.facebook.com/profile.php?id=1304250071&ref=profile

因此刷新了整个页面...奇怪

【参考方案5】：

增加Josh Stodola's 答案：据我了解，YUI Bookmark Manager 正是完成这项工作。