15

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

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

4

5 回答 5

39

请参阅 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;

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

于 2009-03-21T00:28:32.757 回答
3

提供看起来不变的页眉和页脚的一种方法是通过 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 所做的，但它会给你带来几乎相同的效果。

于 2009-03-21T00:19:48.190 回答
0

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

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

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

于 2009-03-21T00:19:55.617 回答
0

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

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

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

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

于 2009-03-21T00:29:38.853 回答
0

补充乔什斯托多拉的回答：据我了解，YUI 书签管理器正是完成这项工作。

于 2009-03-22T07:36:52.157 回答