preserve页面状态，使用浏览器后退按钮重新审视 [英] Preserve page state for revisiting using browser back button

问题描述

我有一个网页，动态加载的基础上按下一个按钮，用户内容：

I have a page that dynamically loads content based on a user pushing a button:

${document).ready(function)
{
    $("#myButton").click(function()
    {
        $("#dynamicDiv").load("www.example.com");
    });
}

动态内容正常工作，我可以整天抓取的网页。但是，你跟着一个链接到另一个页面后，再preSS浏览器的后退按钮回到页面时，页面完全复位，就好像曾经被装没有任何动态内容。

The dynamic content works fine, I can fetch pages all day long. But after you follow a link to another page, then press the browser back button to come back to the page, the page is completely reset as though no dynamic content had ever been loaded.

我发誓我以前见过不同的行为，但也许我疯了。如若不是浏览器preserve页面的状态，而不是重新渲染呢？

I swear I've seen different behavior before, but maybe I'm insane. Shouldn't the browser preserve the state of the page, rather than re-rendering it?

编辑： 顺便说一句，我使用的游戏！框架，如果有任何关系到这一点。

By the way, I'm using Play! framework, if that has any bearing on this.

推荐答案

浏览器加载，因为它是第一次收到的页面。通过JavaScript做任何DOM修改将不会是preserved。

The browser loads the page as it was first received. Any DOM modifications done via javascript will not be preserved.

如果你想preserve你将不得不做一些额外的工作的修改。在修改DOM，更新URL哈希值，你可以在以后分析和重新修改的标识符。每当页面加载，你需要检查的哈希的presence并根据标识做DOM修改。

If you want to preserve the modifications you will have to do some extra work. After you modify the DOM, update the url hash with an identifier that you can later parse and recreate the modification. Whenever the page is loaded you need to check for the presence of a hash and do the DOM modifications based on the identifier.

例如，如果要动态显示用户信息。你显示一个每次你会改变URL hash来是这样的：＃/用户/约翰。每当你需要检查，如果哈希存在的页面加载（ window.location.hash ），分析它，并加载用户信息。

For example if you are displaying user information dynamically. Every time you display one you would change the url hash to something like this: "#/user/john". Whenever the page loads you need to check if the hash exists (window.location.hash), parse it, and load the user information.

这篇关于preserve页面状态，使用浏览器后退按钮重新审视的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！