Question

我有一个页面可以根据用户按下按钮动态加载内容：

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

动态内容运行正常，我可以整天抓取页面。但是，在您按照指向另一个页面的链接后，再按浏览器后退按钮返回页面，页面完全重置，就像没有加载任何动态内容一样。

我发誓以前我看过不同的行为，但也许我疯了。浏览器不应该保留页面的状态，而不是重新呈现它吗？

编辑：顺便说一下，我正在使用Play！框架，如果这与此有任何关系。

Answer 1

浏览器会在首次收到页面时加载页面。通过javascript完成的任何DOM修改都不会被保留。

如果您想保留修改，则必须做一些额外的工作。修改DOM后，使用稍后可以解析的标识符更新url哈希并重新创建修改。每当加载页面时，您需要检查是否存在哈希，并根据标识符进行DOM修改。

例如，如果您要动态显示用户信息。每次显示一个，你都会将url hash更改为：“＃/ user / john”。每当页面加载时，您需要检查哈希是否存在（ window.location.hash ），解析它并加载用户信息。

Answer 2

实现浏览器后退功能很难。使用像jquery.history.js这样的插件时会变得更容易。

http://tkyk.github.com/jquery-history-plugin/

Answer 3

epignosisx和Malcolm都是对的。它也被称为“深层链接”。我们使用JQuery Address Plugin在最近的Play应用程序中处理这个问题。

http://www.asual.com/jquery/address/

Answer 4

我使用的一种技术是将状态序列化为JSON，将其存储在哈希字符串中，然后在页面导航回来时将其读回。这已经在IE10 +，Firefox，Chrome中进行了测试。

示例：

// On state change or at least before navigating away from the page, serialize and encode the state
// data you want to retain into the hash string

window.location.hash = encodeURIComponent(JSON.stringify(myData));

// If navigating away using Javascript, be sure to use window.location.href over window.location.replace

window.location.href = '/another-page-url'

....

// On page load (e.g. in an init function), if there is data in the #hash, overwrite initial state data
// by decoding and parsing the JSON string

if (window.location.hash) {

    // Read the hash string omitting the # prefix

    var hashJson = window.location.hash.substring(1);

    // Restore the deserialized data to memory

    myData = JSON.parse(decodeURIComponent(hashJson));
}

使用浏览器后退按钮保留页面状态以便重新访问

4 个答案: