4

初めて履歴オブジェクトで遊んでいます。クロムでテストしている次のコードがあります。

<!DOCTYPE html>
<html>
        <head>
                <script type="text/javascript">

window.addEventListener('popstate', function(event) {
  console.log('popstate fired!');
   console.log(event.state);

});

function showbox()
{
   document.getElementById('box').style.display = 'block';
   history.pushState({somethinggoeshere:'but what?'}, 'I put text here, but how do i verify the browser has received it?', '?showbox=true');
}
                </script>
        </head>
        <body>
                <a onclick="showbox();">Show box</a>
                <div id="box" style="background:red; height:100px; display:none;"></div>
        </body>
</html>

[ボックスを表示] リンクをクリックすると、赤いボックスが表示されます。Chrome ブラウザー ウィンドウの [戻る] ボタンをクリックして、console.log を確認すると、event.state が null です。なぜヌルなのですか？これに history.pushState を設定しませんでしたか?

4

2 に答える 2

6

を使用すると、ページの「現在の状態」（ブラウザは実際にはページの状態を保存しません。最初のパラメータとして渡されたオブジェクトを履歴内のページに関連付けるだけです）をブラウザの履歴にpushStateプッシュします。スタック。履歴スタックでそのページを参照すると、プッシュしたオブジェクトが（に）表示されます。pushStateonpopstate

JSON.stringify（注：編集できるものなら何でも渡すことができますpushState。）

履歴のページに戻りましたが、そのページにはが追加されpushStateていないため、「状態」はありません。

「戻る」をクリックした後、ブラウザの「進む」ボタンを押してみてください。event.stateそうではないことがわかりますnull。

したがって、渡すオブジェクトは履歴スタックにプッシュされたページにリンクされており、履歴内のそのページにアクセスしたときにのみ表示されます。

于 2012-11-29T19:36:32.143 に答える