pushState執行時不應該到

我正在使用HTML歷史API來操縱瀏覽器歷史堆棧以控制在我的網站上使用JavaScript的導航。我設置的改變頁面的功能工作正常，但奇怪的是，當我爲每個單獨頁面更改添加pushState時，pushState會自動觸發，因此函數中最後一次頁面更改始終是最後一次執行的頁面更改。這意味着被推入的狀態總是最後的頁面更改語句。pushState執行時不應該到

中的JavaScript：

// Change Page Function 

function ChangeContent (page) { 

var pages={"homepage":{title: "homepage"},"servicespage":{title: "servicespage"},"estimatespage":{title: "estimatespage"}}; 

HideNav(); 

//Show home page 
for(var homepage in pages) { 

    if(page!==homepage) { 

     document.getElementById(homepage).style.display='none'; 
    } 

    else { 

     document.getElementById(homepage).style.display='block'; 
     history.pushState("homepage", "Home", "home"); 
     window.scrollTo(0,0); 
    } 
} 

//Show services page 
for(var servicespage in pages) { 

    if(page!==servicespage) { 

     document.getElementById(servicespage).style.display='none'; 
    } 

    else { 

     document.getElementById(servicespage).style.display='block'; 
     history.pushState("servicespage", "Our Services", "services"); 
     window.scrollTo(0,0); 
    } 
} 

//Show estimates page 
for(var estimatespage in pages) { 

    if(page!==estimatespage) { 

     document.getElementById(estimatespage).style.display='none'; 
    } 

    else { 

     document.getElementById(estimatespage).style.display='block'; 
     history.pushState("estimatespage", "Get An Estimate", "estimates"); 
     window.scrollTo(0,0); 
    } 
} 
}

當你運行該代碼，而不是每個單獨的頁面推動它的狀態被點擊的頁面時，得到推的狀態總是在估算頁面狀態。我嘗試過使用else if語句，我試圖將每個for語句嵌入到自執行函數中，希望它可以解決某種範圍問題，但我沒有運氣。

這是我onPopstate功能：

// History State Change Display 
window.onpopstate = function (event) { 

var state = event.state; 

console.log(state); 

// Change History State Display To Home Page 
if (state === "homepage") { 

    document.getElementById("homepage").style.display = 'block'; 
} else { 

    document.getElementById("homepage").style.display = 'none'; 
} 

// Change History State Display To Services Page 
if (state === "servicespage") { 

    document.getElementById("servicespage").style.display = 'block'; 
} else { 

    document.getElementById("servicespage").style.display = 'none'; 
} 

// Change History State Display To Estimates Page 
if (state === "estimatespage") { 

    document.getElementById("estimatespage").style.display = 'block'; 
} else { 

    document.getElementById("estimatespage").style.display = 'none'; 
} 
};

出於某種原因，每一個新的頁面我點擊的URL是擴展/estimatespage，然後當我點擊後退按鈕，它只是通過以相反的順序頁面週期它們被寫入換頁功能中，並正確更新URL。

我不完全確定這裏的問題是什麼，但我認爲我自動推送所有頁面的狀態，這很奇怪，因爲剩下的代碼只在選擇了正確的頁面時才執行。

任何幫助，將不勝感激，因爲我認爲這可能比我做的更明顯。

HTML

<div id="nav"> 
    <div class="headerlist" onclick="ChangeContent('homepage');">Home</div> 
    <div class="headerlist" onclick="ChangeContent('servicespage');">Services</div> 
    <div class="headerlist" onclick="ChangeContent('estimatespage');">Estimates</div> 
</div> 

<div id=homepage></div> 
<div id=servicespage></div> 
<div id=estimatespage></div>

來源

2015-06-03 123

，你能否告訴了'ChangeContent（）'調用？ –

在問題底部的編輯中補充說明。 – 123

您在ChangeContent()有三個for循環。所有三個循環都測試完全相同的條件 - 僅使用重命名的變量。

保持風格隱約一樣的，你可以試試這個來代替，注意，這個單迴路是更換所有這三個循環的ChangeContent()：

 for (var p in pages) { 
      if (page !== p) { 
       document.getElementById(p).style.display = 'none'; 
      } 
      else { 
       document.getElementById(p).style.display = 'block'; 
       if (p === "homepage") 
        history.pushState("homepage", "Home", "home"); 
       else if (p === "servicespage") 
        history.pushState("servicespage", "Our Services", "services"); 
       else if (p === "estimatespage") 
        history.pushState("estimatespage", "Get An Estimate", "estimates");      
       window.scrollTo(0, 0); 
      } 
     }

來源

2015-06-03 23:24:51

除了一個問題之外，這個功能完美無缺......我的index.html頁面現在不像默認顯示「id = homepage」。（我已經在我的CSS中設置了這種方式。）有沒有辦法讓主頁顯示在index.html的默認加載中？ – 123

對不起，沒有足夠的信息提供瞭解這個問題。如果原來的問題得到解決，那麼我想也許關閉這個問題並且在一個新問題中詢問這個問題？ –

pushState執行時不應該到

回答

相關問題