当前位置：文江博客话题详情

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

发布于 2024-07-14 23:50:40 字数 113 浏览 6 评论 0原文

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

从技术上来说，Facebook 是如何实现这一目标的？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无法回应 2024-07-21 23:50:40

请参阅 Mark Brittingham 的答案以了解如何设计它，尽管我认为这不是您在这里要问的。我将为您提供有关其工作原理的技术细节（以及为什么它相当出色）。

将鼠标悬停在标题中的“个人资料”链接上时查看状态栏...

http://www.facebook.com/profile.php? id=514287820&ref=个人资料

这就是的位置。标签被指向。现在，当您单击地址栏时，请查看它...

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

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

回复收藏 0 原文

淡淡的优雅 2024-07-21 23:50:40

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

#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 是否就是这样做的，但它会给你带来大致相同的效果。

One way to provide headers and footers that appear invariant is via CSS - here is an example of a fixed footer (notice the "position: fixed;"):

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

You'll want to make sure that you add some Margin-Bottom to your page divs (those that fill the main portion of the page) to leave room for the fixed footer (same with a header using Margin-Top).

This does not actually stay on the page but, because the positioning is so tight and invariant, it will appear as if it does unless your page loads take too long. I don't know if this is what FaceBook does but it will give you much the same effect.

回复收藏 0 原文

踏雪无痕 2024-07-21 23:50:40

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

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

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

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

回复收藏 0 原文

迷你仙 2024-07-21 23:50:40

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

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

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

回复收藏 0 原文