如何创建即使在浏览其他页面时仍然保留的静态页眉（lala.com）

我对lala.com的工作方式感兴趣。他们有一个标题，保持固定在浏览器的顶部，他们有一个Flash音乐播放器。如何创建即使在浏览其他页面时仍然保留的静态页眉（lala.com）

您可以点击网站中的其他链接，它们显示在标题下方，但标题不会中断，并且可以继续播放音乐。

如果目标是一个现代浏览器，比如IE8 & FF 3.6，实现这个目标的最好方法是什么？

感谢您的任何帮助。

2010-03-25 user169867

帧/ I帧

一体，实现这种方式是创建一个frameset或使用iframes显示子页面。顶部（或底部）框架将是一个非常小的框架，并包含您的音乐播放器。大框架将包含正在浏览的页面。这种技术被用于例如通过Google点击image search result。

此方法有其缺点：用户将在地址栏中看到您的URL，而不是正在浏览的页面。如果用户在地址栏中输入内容，他们将离开您的框架集。这是不可能的，例如记下当前页面的URL。

阿贾克斯

第二，更好的办法是建立加载其他页面到通过AJAX当前页面的导航。请参阅示例实施here。这将提供流畅的加载，音乐将继续播放。如果做得对，甚至有可能保留一个健康的链接结构，不会破坏外部引用，并有“后退”按钮。我链接的教程涵盖了两个方面。要小心，这是一个由3部分组成的教程。虽然它仅适用于JavaScript，但有些解决方案会优雅地降级（当JavaScript被关闭时，会回落到切换页面的“正常”行为）。

来源

2010-03-25 14:53:07

真是个好主意！把我的耻辱... – Kyle 2010-03-25 14:59:17

@凯尔谢谢！它只是出来的方式:) – 2010-03-25 14:59:59

这是伟大的，真棒+1。 – Kyle 2010-03-25 15:01:12

这个具体的例子lala.com使用iframes完成。

来源

2010-03-25 14:53:58 Kyle

除了框架，你可以用ajax做部分页面刷新。而不是完全加载每个操作的新页面，你会做部分页面刷新。通过仔细编码，您可以保留bookmarking and the back button functionality。像jQuery这样的库（以及其他许多库）使跨越不同浏览器的Ajax显得更简单。编辑快速搜索揭示了关于jQuery的后退按钮插件的Stack Overflow问题。所以，如果你使用jQuery，你可以使这个方法更容易。

下面是一些存根代码：

HTML

<html> 
<head> 
<!-- ... --> 
</head> 
<body> 
<div id="music-header"> 
<!-- ...Music header content goes here --> 
</div> 
<div id="content"> 
<!-- ...Body of different pages goes here --> 
</div> 
</body> 
</html>

JavaScript是在我提供了关于如何处理书签和回退按钮提供的链接。

来源

2010-03-25 14:58:06 justkt

如何创建即使在浏览其他页面时仍然保留的静态页眉（lala.com）

回答

相关问题