如何刷新页面并保持某些元素不刷新（持久）？

Question

嘿。 我需要创建一个聊天，当用户浏览网站时，该聊天将保留在页面上 - 就像在 Facebook 或 Gmail 上一样。 因此，我正在寻找一种方法，如何在刷新页面并浏览网站的同时使页面的某些部分保留在用户的屏幕上。

是的，我知道 FB 和 GM 是如何做到这一点的 - 他们通过 ajax 刷新所有内容，并相应地更新 url 中的哈希值。 也许，还有另一种方法可以做到这一点，或者我被迫重构我网站的所有导航？

谢谢。

Answer 1

您可以使用 iframe 来做到这一点。创建一个包装 div，其中包含您的导航、主要内容 (id="main_content")（您要更改的部分）以及您希望通过导航保持不变的区域（您的聊天窗口） ）。

您需要为包装 div 分配一个 position:relative 属性，以便能够在其中定位 #chat_window，并将 position:absolute 分配给聊天 iframe。然后，您可以将聊天 iframe 放置在您希望其显示的位置，并使用 jQuery 函数，例如：

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

使聊天窗口显示在主要内容区域上。然后确保您的导航链接使用 main_content 作为目标。