像facebook聊天的窗口

Question

Facebook聊天窗口保持打開狀態，未更改，以刷新頁面，甚至在我們更改頁面時。 如何重現類似的東西？ 嘗試使用frameset，但它沒有用。

如何保持div打開一個類似於內部的窗口，即使刷新頁面或clocar在網站鏈接后？

Answer 1

喜歡他們，你可以嘗試 -

1. Facebook頁面之間共享數據。 可能是HTML5 localStorage ？ 餅干？ 我不確定。

2. 如果您注意到，他們不會“刷新”頁面，他們會刷新頁面上的內容以便后續加載。 （當然，除非你手動導航到同一頁面。）

3. 最后，它的所有CSS 主要是一些z-index投入使用。

我希望這3個足以讓你入門。

Answer 2

我認為Facebook的整個頁面都沒有加載。 每個鏈接都有自己的“目標”。 他們中的大多數都會獲取一個頁面（我想簡單地用AJAX）來展示，其他人只是改變一些屏幕的部分內容。 所以說，你有兩個div。 一個div是chat-div。 定位固定和全部，z-index在100，它將始終保持在最頂層。 頁面的其余部分是另一個div。 在這個div中，您可以使用AJAX加載某些頁面，而無需刷新整個屏幕。

與重新加載屏幕一樣：您可以輕松保存（也使用AJAX）用戶是關閉聊天屏幕還是打開它。 只需在名為“聊天”的數據庫中創建一個表，然后在打開一個聊天屏幕時，在該表中放入一個帶有'person_1'，'person_2''lastmessage'和'active'的條目。 當他們關閉聊天時，您可以將“active”字段設置為false。 然后，每當有人加載整個網站時，您檢查表格聊天以查看活動聊天，並在有任何內容時顯示它們。

Answer 3

我會研究qjuery-qjax： https ： //github.com/defunkt/jquery-pjax

從他們的文檔：

pjax的工作原理是通過ajax從服務器獲取html，並用ajax'd html替換頁面上容器的內容。 然后，它使用pushState更新瀏覽器的當前URL，而無需重新加載頁面的布局或任何資源（js，css），從而提供快速，完整頁面加載的外觀。 但實際上它只是ajax和pushState。