javascript - 如何在浏览器位置更改时保留 HTML 元素

Question

有没有办法在页面更改位置时保留一些HTML 元素的. 就像一个div不会被重新渲染但保持它的状态。

您可以在Facebook 聊天中找到类似的示例，您可以看到聊天窗口不会更改其位置或InnerHtml当您导航到另一个页面时。

PS：我不知道从哪里开始，所以任何文档都会受到赞赏。如果解决方案是XHTML而不是HTML5，那就太好了

Answer 1

更改时window.location，页面会自动完全重新渲染。所以，从这个角度来看，答案是否定的。但是，可以通过使用来获得这种效果AJAX。使用 ajax 在页面不重新加载或更改位置时向服务器发出请求（window.location始终相同）。这是一个很好的链接AJAX：

http://www.w3schools.com/ajax/default.asp

如果您仍然希望页面更改其位置，在您发出 ajax 请求并更新页面上的内容后，您可以使用 javascript 的 history.pushState 函数。但是你必须找到一种方法让它跨浏览器（又名让它在 IE 中工作）。

Answer 2

我不确切知道 facebook 聊天是如何工作的，但我知道所有聊天消息都存储在数据库中，因此您可以稍后通过消息访问它们。

我的假设是设置了一个 Session 变量，让 facebook 的 UI 知道你打开了哪些聊天，或者它也可能存储在数据库中。无论哪种情况，您都必须使用一些外部脚本才能执行此操作。为方便起见，假设您将使用 PHP，并将数据存储在 SESSION 变量中。

/* Storing the variable */
$users = array('user123', 'user456', 'user789');
$_SESSION['chat_windows_open'] = $users;
/* Retrieving the values */
foreach($_SESSION['chat_windows_open'] as $chat) {
/* Use $chat to get the username, query the DB for 
the message content, and echo it in whatever form you
wish. */
}