3

我是使用 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>

当我按下 Show box 时，下面会出现一个红色框，并且 iframe 的内容从 t1.html 变为 t2.html。当我在 chrome 浏览器中按下后退按钮时，iframe 的内容会回到 t1.html ，但红色框并没有消失。

为什么后退按钮恢复的是iframe的内容而不是redbox的css样式（返回显示：无）；

4

1 回答 1

3

浏览器的历史只是一个 URL 列表。 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 会看到并返回历史记录。您也需要window.addEventListener('popstate', function()在 iFrame 中的页面内。

于 2012-11-29T20:02:15.907 回答