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

Question

嘿。 我需要创建一个聊天，当用户浏览网站时，该聊天将留在页面上 - 比如在facebook或gmail上。 所以，我正在寻找如何在用户的屏幕上保持页面的某些部分持久性的方式，同时刷新页面并浏览网站。

是的，我知道FB和GM是如何做到的 - 他们通过ajax刷新一切，并相应地更新url中的hash。 也许，有另一种做法，或者我被迫重构我所有网站的导航？

感谢。

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作为目标。