如何刷新頁面並保持一些元素不刷新（持久）？

Question

嘿。 我需要創建一個聊天，這個聊天會在用戶通過網站瀏覽時留在頁面上 - 就像在Facebook或Gmail上一樣。 因此，我正在尋找如何保持頁面的某些部分在用戶屏幕上持久存在的方式，同時刷新頁面並瀏覽網站。

是的，我知道FB和GM如何做到這一點 - 它們通過ajax刷新所有內容，並相應更新URL中的哈希值。 也許，還有另一種做法，或者我不得不重構我所有網站的導航？

謝謝。

Answer 1

您可以使用iframe來做到這一點。創建一個包裝div，其中包含您的導航，主要內容（id="main_content"）（您想要更改的部分）以及您希望通過導航保持不變的區域（您的聊天窗口<iframe id="chat_window" blah blah />）。

您需要爲包裝div指定position: relative屬性，以便能夠在其中定位#chat_window，並且將position: absolute定位到聊天iframe。然後，你可以定位你希望它出現在聊天iframe和使用jQuery的功能，如：

$(function() { 
    $("#chat_button").click(function() { 
    $("#chat_window").css("z-index", "5") 
    }); 
}); 

使聊天窗口顯示在主內容區域。然後確保您的導航鏈接使用main_content作爲他們的目標。