小编典典

在加载其他页面时,Facebook如何保持页眉和页脚固定?

ajax

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

从技术上来讲,Facebook如何实现这一目标?


阅读 310

收藏
2020-07-26

共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

注意“#”
片段标识符/哈希吗?这基本上证明您尚未离开页面,并且先前的请求是使用AJAX进行的。他们正在拦截这些链接上的click事件,并使用自己的东西覆盖默认功能。

要使用Javascript做到这一点,您所需要做的就是为这些链接分配一个click事件处理程序,如下所示:

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

2020-07-26