Question

我是使用html 5历史记录对象的新手。我尝试了以下代码：

<!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，但红色框不会消失。

为什么后退按钮会恢复iframe的内容而不是redbox的css样式（返回display：none）;

Answer 1

浏览器的历史记录只是一个网址列表。 pushState允许您将对象与历史记录中的URL相关联，如果愿意，则为“状态”。此对象是传递给pushState的第一个参数。

就像在“正常”浏览历史记录时一样，页面的实际状态不会被保存。随你（由你决定。在您的对象中，您应该保存应显示红色框，并在onpopstate再次显示。

如：

history.pushState({
    redBox: document.getElementById('box').style.display
}, 'Most browsers ignore this parameter.', '?complete=true');

然后在onpopstate中，将document.getElementById('box').style.display设为event.state.redBox。

编辑：iFrame就像一个新的浏览器窗口，因此它有自己的历史对象。当您点击“返回”时，iFrame会看到并返回历史记录。您还需要在iFrame页面中包含window.addEventListener('popstate', function()。

HTML 5历史记录恢复了一些变化而不是其他变化？

1 个答案: