更改网页位置，同时保持一些项目静态？

Question

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

Facebook底部的酒吧始终保持不变，打开所有聊天窗口，更改页面时不会轻弹，但网页和地址栏会全部更改为您请求的新页面，对我来说似乎网页实际上并没有改变，而是地址栏的URL改变以及页面内容。

我正在制作乐队网站的音乐播放器，我希望在网站上的所有网页上保持静态，而无需重新加载并重新开始每一个新页面。

Answer 1

听起来像你想要一个模板，并使用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);}); 
}); 

Answer 2

底部酒吧的位置与position: fixed，这使得它相对于视口，而不是文档。

其他页面加载XHR或AJAX。

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

Zach Rait是我们基础架构团队的一名工程师，实现了历史记录API，通过AJAX实现页面内容的选择性加载，同时保留可读的URL。之前，当前的应用程序状态存储在URL片段中，导致URL不正确，如“profile.php？id = 1586010043＃！/ pages/Haskell/401573824771”。现在，由于HTML5允许我们将当前显示的URL与应用程序的实际状态分离，因此我们可以更快地显示页面，节省带宽并避免污染用户的位置栏。

Source。