html 5中的歷史對象的event.state爲空

我第一次玩歷史對象。我有我已經在鉻測試下面的代碼：html 5中的歷史對象的event.state爲空

<!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爲空。爲什麼它是空的？我沒有用history.pushState填充這個東西嗎？

來源

2012-11-29 John

當您使用pushState，你推「當前狀態」頁面（瀏覽器實際上並不保存網頁的狀態。它只是作爲第一個參數傳遞的對象與關聯到pushState瀏覽器的歷史記錄）。當您瀏覽到歷史堆棧中的該頁面時，您推送的對象將出現（在onpopstate中）。

（注：你可以通過任何可以被JSON.stringify版到pushState。）

你回到歷史上的一個頁面，但與pushState添加該頁面，所以它沒有「狀態」。

點擊「返回」後，嘗試按下瀏覽器中的「轉發」按鈕。那麼你會看到event.state不是null。

因此，您傳遞的對象鏈接到推入歷史堆棧的頁面，並且只有在您訪問歷史記錄中的頁面時纔會看到它。

來源

2012-11-29 19:36:32

當你說「推動頁面的當前狀態」時，「當前狀態」是否包含#box正在顯示的狀態= block？如果瀏覽器重新從歷史記錄中瀏覽，瀏覽器是否記得保留該框的可見性？ – John

@John：對不起，如果這是令人困惑。這就像正常瀏覽歷史一樣。瀏覽器只會將作爲第一個參數傳入的對象返回給'pushState'。它不會記住關於該頁面的任何內容，除了URL。這取決於你。 –

感謝你的回答。我跟進了另一個基本問題：http://stackoverflow.com/questions/13633691/html-5-history-remembers-restores-some-changes-and-not-others – John

html 5中的歷史對象的event.state爲空

回答

相關問題