在Facebook页面中浏览时,页面加载之间的页眉和页脚固定部分仍然可见,并且地址栏中的URL也会相应更改。至少,这就是我的错觉。
从技术上来讲,Facebook如何实现这一目标?
有关样式的设置,请参考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个像素,露出顶部菜单的一半。单击其中一项,一旦片段标识符更新(没有 任何 窗口重绘/重画延迟),它将立即跳回到页面顶部。