HTML 5历史记录恢复了一些变化而不是其他变化？ [英] html 5 history restores some changes and not others?
问题描述
我是使用html 5历史记录对象的新手。我尝试了以下代码：
I'm new to using the html 5 history object. I tried the following code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
history.pushState({somethinggoeshere:'but what?'}, 'Does a title go here?', '?begin=true');
window.addEventListener('popstate', function(event) {
console.log('popstate fired!');
console.log(event.state);
});
function dosomething()
{
document.getElementById('box').style.display = 'block';
document.getElementById('iframe').src = 't2.html';
history.pushState({somethinggoeshere:'but what?'}, 'Does a title go here?', '?complete=true');
}
</script>
</head>
<body>
<a onclick="dosomething();">Show box</a>
<div id="box" style="background:red; height:100px; display:none;"></div>
<iframe id="iframe" src="t1.html"></iframe>
</body>
</html>
当我按下显示框时，下面会出现一个红框，iframe的内容来自t1 .html到t2.html。当我在Chrome浏览器中按后退按钮时，iframe的内容会返回到t1.html，但红框不会消失。
When I press Show box, a red box appears below, and the contents of the iframe goes from t1.html to t2.html. When I press the back button in the chrome browser, the contents of the iframe goes back to t1.html , but the red box does not disappear.
为什么后退按钮是否恢复iframe的内容而不是redbox的css样式（返回显示：无）;
Why does the back button restore the content of the iframe but not the css styles of the redbox (back to display:none);
推荐答案
浏览器的历史记录只是一个URL列表。 pushState 允许您将对象与历史记录中的URL相关联，如果您愿意，则为状态。此对象是传递给 pushState 的第一个参数。
The browser's history is just a list of URLs. pushState lets you associate an object with a URL in the history, a "state" if you will. This object is the 1st parameter passed to pushState.
就像在正常浏览历史记录时一样，实际页面状态未保存。这取决于你。在你的对象中，你应该保存应该显示的红色框，并在 onpopstate 再次显示它。
Just like when browsing the history "normally", the actual state of the page isn't saved. That's up to you. In your object, you should save that the red box should be shown, and in onpopstate show it again.
例如：
history.pushState({
redBox: document.getElementById('box').style.display
}, 'Most browsers ignore this parameter.', '?complete=true');
然后在 onpopstate 中，设置 document.getElementById（'box'）。style.display to event.state.redBox 。
Then in onpopstate, set document.getElementById('box').style.display to event.state.redBox.
编辑：iFrame就像一个新的浏览器窗口，因此它有自己的历史对象。当您单击返回时，iFrame会看到并返回历史记录。你需要在iFrame的页面内有 window.addEventListener（'popstate'，function（）。
EDIT: The iFrame is like a new browser window, so it has its own history object. When you click "back", the iFrame sees that and goes back in history. You need to have window.addEventListener('popstate', function() inside the page in the iFrame too.
这篇关于HTML 5历史记录恢复了一些变化而不是其他变化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
