如何在實現歷史API時重新加載頁面

我試圖使用History API來允許我在動態加載內容時使用後退和前進按鈕。這裏是我正在使用的代碼，也是我使用的狀態對象的一個例子。如何在實現歷史API時重新加載頁面

我如何使用使用的狀態對象和pushstate()

var stateObj = {Content : homeSection.innerHTML, "Product" : detail.Name, Title : title.innerHTML, Section:"dynamicArticle"}; 
    window.history.pushState(stateObj, "", detailName); 

    window.addEventListener('popstate', function(event) { 
    updateContent(event.state); 
    });

功能：

function updateContent(stateObject) { 
    if (stateObject){ 
    homeSection = document.getElementById(stateObject.Section); 
    homeSection.innerHTML = stateObject.Content; 
    title.innerHTML = stateObject.Title; 

    var items = document.querySelectorAll(".homeItem"); 
    if(items){ 
     for(i=0; i<items.length; i++){ 
     items[i].addEventListener("click", selectedProduct); 
     } 
    } 

    checkoutButton = document.getElementById('checkoutButton'); 
    if(checkoutButton){ 
     checkoutButton.addEventListener('click', function(){ 
      displayCheckout(); 
     }); 
    } 

    basketButton = document.getElementById("basketButton"); 
    quantityInput = document.getElementById("productQuantity"); 
    if(basketButton){ 
     basketButton.addEventListener('click', clicked); 
     basketButton.addEventListener('click', updateBasketNumber); 
     quantityInput.value = "1"; 
    } 

    searchSort = document.getElementById("sort"); 
    if(searchSort){ 
     var items = document.querySelectorAll(".searchResult"); 
     for(i=0; i<items.length; i++){ 
     items[i].addEventListener("click", selectedProduct); 
     } 

     searchSort.addEventListener("change", function(){ 
     sort = searchSort.value; 
     searchItem(e, sort); 
     }); 
    } 
    } 
    else{ 
    return; 
    } 
}

我所掙扎的是，如果我瀏覽到使用pushState()和我的一個頁面嘗試重新加載頁面，就像您期望頁面無法找到一樣。

我問，如果有辦法讓一個重載或有人導航到URL沒有它給了一個錯誤，並給予正確的內容

來源

2015-04-20 Adam

您需要設置您的Web服務器以始終提供包含此內容的靜態HTML頁面。 –

就像@喬恩 - Koops的在註釋中指出你需要配置您的服務器將請求重定向到您鏈接分支所在的同一頁面。

如果您使用的是Apache 2.2.16+得到它的簡單：

FallbackResource /index.html

這將改寫所有的URL到一個單一的入口點是index.html頁。

其他解決方案取決於您正在運行的服務器。

來源

2015-04-20 21:15:40

如何在實現歷史API時重新加載頁面

回答

相關問題