如何從外部網頁導航回使用pushState創建的僞網址？

想要了解歷史API，下面的Mozilla解釋向我建議，即使您推送到歷史記錄的url在服務器上並不真實存在，從外部源點擊後退按鈕將返回原始頁面， pushState的與會者呼籲：如何從外部網頁導航回使用pushState創建的僞網址？

假設http://mozilla.org/foo.html執行下面的JavaScript：

var stateObj = { foo: "bar" }; 
history.pushState(stateObj, "page 2", "bar.html");

這將導致URL欄中顯示http://mozilla.org/bar.html，但不會導致瀏覽r加載bar.html，甚至檢查bar.html是否存在。

現在假設用戶現在導航到google.com，然後單擊回來。此時，URL欄將顯示... mozilla.org/bar.html，並且頁面將獲得狀態對象包含stateObj副本的popstate事件。該頁面本身看起來像foo.html，儘管該頁面可能會在popstate事件期間修改其內容。

如果我們再次點擊，URL將變爲... mozilla.org/foo.html，文檔將獲得另一個popstate事件，這次是一個null狀態對象。在這裏，返回並不會改變文檔內容與上一步中的內容，儘管文檔可能在接收到popstate事件後手動更新其內容。

我在一個MVC項目中創建了一個測試頁面，它實際上只是將按鈕點擊與上面例子中的2行javascript相關聯。如預期的那樣點擊該按鈕，將瀏覽器位置從localhost更改爲localhost/bar.html，並且後退和前進按鈕按預期工作。但是，如果我然後導航到谷歌，並按下後退按鈕，我得到一個404服務器錯誤。我誤解了文檔嗎？我該如何修改代碼，以便從外部源返回按鈕，而不創建實際的'bar.html'？

來源

2013-09-23 Alex

如果有人想知道同樣的事情，我現在使用查詢字符串追加到我的真實網址，而不是不存在的路徑推到歷史。這實現了我想要的，即我可以推送狀態，導航到外部頁面，然後點擊後退按鈕並通過監聽popstate來檢索狀態。

（（我必須承認我仍然略微由Mozilla文檔這確實表明困惑至少！），一個假的路徑應該工作。）

來源

2013-09-26 14:12:38 Alex

我正在使用與MDN相同的代碼，在/之後使用'foo'和'bar'作爲我的URL並且後退前進，但當我嘗試並直接瀏覽到像'/ foo'。看來在這一點上，我需要一個.htaccess或重定向來處理URL，其中'/＃foo'將獲得索引文件，然後我可以對該哈希執行操作。我仍然對如何將歷史作爲直接鏈接感到困惑。 – kaplan

經過多一點研究並查看了一個不錯的[Dive Into HTML5示例]（http://diveintohtml5.info/history.html），似乎您需要查詢字符串或實際文件。有一個鏈接爲html5 [演示頁面]（http://html5demos.com/history），如果您嘗試直接瀏覽到[pushState頁面]（http://html5demos.com/history/second）之一，在一個新的寡婦中，你會得到一個沒有找到就像我們有。 – kaplan

是的，我認爲一些文檔有點誤導/模棱兩可;查詢字符串或實際需要的文件！ – Alex

pushState的是方程的一半....

您還需要聽popstate：

window.addEventListener("popstate", function(e) { 

    console.log(arguments) 
    // read the arguments to figure out what state you need return to 
    // change the page to however you need 

});

添加此功能之上，看着控制檯。我所做的是將足夠的信息保存在js變量中，以便我可以根據需要設置頁面。

當您創建「單頁網頁應用程序」時，pushstate和popstate在html5移動開發中非常實用。這正是我使用它的原因，它非常棒。

來源

2013-09-23 12:56:55

謝謝，但在此之前設置頁面我的問題。從谷歌後退按鈕，比如說，我的localhost/bar.html給出了一個404文件找不到錯誤。它根本沒有加載任何東西。 – Alex

如何從外部網頁導航回使用pushState創建的僞網址？

回答

相關問題