3

html5履歴オブジェクトを使用するのは初めてです。次のコードを試しました。

<!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のコンテンツを復元するのに、レッドボックスのcssスタイルは復元しないのはなぜですか（display：noneに戻る）。

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ます。

EDIT : iFrame は新しいブラウザー ウィンドウのようなものなので、独自の履歴オブジェクトがあります。「戻る」をクリックすると、iFrame はそれを認識し、履歴をさかのぼります。window.addEventListener('popstate', function()iFrame のページ内にも含める必要があります。

于 2012-11-29T20:02:15.907 に答える