更改网页位置，同时保持某些项目不变？答案

【问题标题】：Changing a webpage location, while keeping some items static?更改网页位置，同时保持某些项目不变？
【发布时间】：2011-05-02 00:46:57
【问题描述】：

不确定描述我的意思的最佳方式，最好的方式是在我解释的同时查看 Facebook。

Facebook底部的栏始终保持不变，所有聊天窗口都打开，更改页面时不会闪烁，但是网页和地址栏都会更改为您请求的新页面，在我看来，网页实际上并没有发生任何变化，而是地址栏的 URL 以及页面内容都发生了变化。

我正在为一个乐队网站开发音乐播放器，我想在网站上的所有页面上保持静态，而不需要重新加载并重新开始每个新页面。

【问题讨论】：

标签： php javascript facebook

【解决方案1】：

底部栏以position: fixed 定位，这使其相对于视口，而不是文档。

其他页面使用 XHR 或 AJAX 加载。

不断变化的 URL 可能是片段标识符，除非你有一个尖端的浏览器，它似乎正在使用 HTML5 history API（GitHub 目前也在使用）。

我们基础架构团队的工程师 Zach Rait 实施了 History API，以支持通过 AJAX 选择性地加载页面内容，同时保留可读的 URL。以前，当前应用程序状态存储在 URL 片段中，这会导致不合时宜的 URL，例如“profile.php?id=1586010043#!/pages/Haskell/401573824771”。现在，由于 HTML5 允许我们将当前显示的 URL 与应用程序的实际状态解耦，我们能够更快地显示页面、节省带宽并避免污染用户的位置栏。

Source.

【讨论】：

啊，谢谢你的回复。片段标识符似乎是向后兼容的最佳选择。

【解决方案2】：

听起来您想要一个模板并使用 JQuery 或类似语言在网站的一部分上动态加载新内容？通过这种方式，JQuery 将使用 ajax 在主窗口的一部分中加载新内容，而无需您重新加载主页面。

您可以使用 css 在底部设置条形样式

#somelink{
position:absolute;
bottom:0px;
}

HTML

<a href="" id="somelink">click me</a>
<div id="news">Replace me with new content</div>

jQuery

$("#somelink").click(function(){
  $("#news").get("album.html",function(data){$(this).html(data);}); 
});

【讨论】：