如何加載頁面而不重新加載？

-1

可能重複：
Modify the URL without reloading the page 如何加載頁面而不重新加載？

我知道的主題是有點古怪。

當我轉到http://www.heroku.com/how/relax並單擊其他菜單（Deploy，Connect等...）時，我發現瀏覽器更改其url，但感覺像是Ajax。

這種技術叫做什麼？

來源

2012-02-01 Moon

@ x3ro //這就是我一直在尋找的東西。謝謝！ – Moon 2012-02-01 01:54:46

使用javascript & DOM來調用此技術以更改fadeIn()和[fadeOut（）] [2]動畫（用於jQuery）的頁面內容。

對於頁面位置的變化：

你必須使用HTML5's pushState() method改變瀏覽器歷史記錄。

window.history.pushState(data, "Title", "/new-url");

文件表示：

pushState的（）有三個參數：一個狀態對象，一個標題（這是目前忽略），和（任選地）一個URL。

最後一個參數是新的URL。出於安全原因，您只能更改URL的路徑，而不是域本身。第二個參數是對新狀態的描述。第一個參數是您可能想要與狀態一起存儲的一些數據。

來源

2012-02-01 01:49:22

這並不能解釋URL更改。 – millimoose 2012-02-01 01:54:05

HTML5的pushState（）方法可以做到這一點。哦，可能是你在我更新時發表評論.. – 2012-02-01 01:55:45

似乎是這樣，對不起。 – millimoose 2012-02-01 01:57:09

違規代碼：

historyAPISupported : function(){ 
    return (typeof window.history.pushState !== 'undefined') 
}, 

clickTab : function(tab){ 
    var humanTab = tab.replace('js-', '') 
    var newUrl = document.location.pathname.replace(/\/(how.*)/, '/how/' + humanTab) 
    this.activateTab(tab) 
    if (this.historyAPISupported()){ 
    window.history.pushState({ path: newUrl }, null, newUrl) 
    }else{ 
    if (document.location.pathname != newUrl){ 
     document.location.href = document.location.href.replace(/\/(how.*)/, '/how/' + humanTab) 
    } 
    } 
},

盡我所能告訴它仍然使用了錨，但需要在瀏覽器歷史記錄的優勢進行更改（您可以快速查看您的「進度」欄顯示的位置的散列，但瀏覽器URL更改）。

除了所有這些，內容從一開始就被加載，內容只是淡入和淡出。

關於實際問題，我不認爲它有一個特定的名稱。 AJAX在幕後加載內容，轉換使視覺效果，以及一些狡猾的JS使鏈接看起來改變。

來源

2012-02-01 01:54:03

鏈接確實發生了變化，而不僅僅是外觀。即使許多內容已預先加載，頁面也會加載。您可以通過點擊圖標來確定每個菜單項上重新加載的頁面。 – 2012-02-01 02:00:21

@Travis：必須是你的瀏覽器，因爲我看到所有加載在與標籤相關的各種'/ html/body/section/div/article/aside'元素下的內容，然後設計/動畫顯示/隱藏。 – 2012-02-01 02:03:21

我正在使用谷歌瀏覽器。但是，經過進一步的檢查，似乎瀏覽器只是被欺騙，看起來像重新加載，因爲當我跟蹤網絡活動時，很顯然，當單擊每個鏈接時頁面實際上不會重新加載所有資源（集合連接等）。總之，我必須同意轉換是通過代碼完成的，而不是通過重新加載。 – 2012-02-01 21:51:37

很可能使用pushState() API將瀏覽器URL更改爲「假」導航。新內容可以通過AJAX預加載或獲取。

來源

2012-02-01 01:56:19 millimoose

如何加載頁面而不重新加載？

回答

相關問題