10

是否可以将最后一个状态的 html 推送到历史堆栈，如下所示：

history.pushState(null, null, {html: $('body').html()});

更改窗口位置：

window.location = url;

现在从新位置：

window.addEventListener('popstate', function(event) {
    // back to the last state - event.state.html
}
history.back() // That what's firing the popstate event?
4

2 回答 2

1

我搜索了将最后一个状态的html推送到历史的请求，但没有得到满意的答案。但是我有一个想法给你，你为什么不尝试保存状态的 html，然后再将其推送到历史记录？这很可能使用客户端（cookies）或服务器端（会话）变量，即使在事情被推回历史后也可以检索。

于 2015-05-19T04:27:28.710 回答
0

pushState 方法将state对象作为您传入的第一个参数null：

pushState() 方法示例

var stateObj = { foo: "bar" };

history.pushState(stateObj, "第 2 页", "bar.html");

对于您的示例：

//object goes in first argument
history.pushState({ html: $('body').html() }, "Title of Page", "Url to update address bar" );

//On PopState, you have access to event.state
window.addEventListener('popstate', function(event) {
    var priorStateObj = event.state;
    console.log(priorStateObj.html);
}

我担心的是，您似乎希望将document.write()HTML 返回到页面？如果是这样，我会尽量避免这种情况，正如这个 SO 线程中所解释的那样： 为什么 document.write 被认为是“不好的做法”？

至于保存正文的整个 HTML，这很棘手。例如，在 Firefox 中，有 640 KB 的限制。如果您的 HTML 可能超过该数量（很可能），您只需保存可用于重新创建所需内容的信息。尝试Object使用 JavaScript/jQuery/etc 填充页面所需的信息来保存。

状态对象可以是任何可以序列化的对象。因为 Firefox 将状态对象保存到用户的磁盘，以便在用户重新启动浏览器后可以恢复它们，所以我们对状态对象的序列化表示施加了 640k 字符的大小限制。如果将序列化表示大于此的状态对象传递给 pushState()，则该方法将抛出异常。如果您需要更多空间，我们鼓励您使用 sessionStorage 和/或 localStorage。

这里有更多好的信息：

https://developer.mozilla.org/en-US/docs/Web/API/History_API

于 2017-01-26T14:50:01.203 回答