更改網頁位置，同時保持一些項目靜態？

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。