當(dāng)您開發(fā)像博客或頁(yè)面這樣的應(yīng)用程序時(shí)，數(shù)據(jù)可能會(huì)根據(jù)用戶操作而改變，您會(huì)希望該頁(yè)面經(jīng)常刷新。

當(dāng)頁(yè)面刷新或重新加載時(shí)，它將顯示基于這些用戶交互的任何新數(shù)據(jù)。好消息——你可以用一行代碼在 JavaScript 中實(shí)現(xiàn)這種類型的功能。

在本JavaScript教程中，我們將學(xué)習(xí)如何在 JavaScript 中重新加載網(wǎng)頁(yè)，并了解我們可能希望實(shí)現(xiàn)這些重新加載的其他一些情況以及如何執(zhí)行此操作。

如何在 JavaScript 中刷新頁(yè)面location.reload()

您可以使用location.reload()JavaScript 方法重新加載當(dāng)前 URL。此方法的功能類似于瀏覽器的刷新按鈕。

該reload()方法是負(fù)責(zé)頁(yè)面重新加載的主要方法。另一方面，location是一個(gè)接口，表示它鏈接到的對(duì)象的實(shí)際位置(URL)——在這種情況下，是我們要重新加載的頁(yè)面的 URL?？梢酝ㄟ^(guò)document.location或訪問(wèn)它window.location。

以下是重新加載頁(yè)面的語(yǔ)法：

window.location.reload();

注意：當(dāng)您閱讀有關(guān)“JavaScript 中的頁(yè)面重新加載”的一些資源時(shí)，您會(huì)遇到各種解釋，說(shuō)明 relaod 方法接受布爾值作為參數(shù)，并location.reload(true)幫助強(qiáng)制重新加載以繞過(guò)其緩存。但事實(shí)并非如此。

根據(jù)MDN 文檔，布爾參數(shù)不是當(dāng)前規(guī)范的一部分location.reload()——事實(shí)上，它從未成為任何已location.reload()發(fā)布規(guī)范的一部分。

另一方面，F(xiàn)irefox 等瀏覽器支持使用稱為forceGetfor的非標(biāo)準(zhǔn)布爾參數(shù)location.reload()，它指示 Firefox 繞過(guò)其緩存并強(qiáng)制重新加載當(dāng)前文檔。

除 Firefox 外，您location.reload()在其他瀏覽器中調(diào)用時(shí)指定的任何參數(shù)都將被忽略且無(wú)效。

單擊按鈕時(shí)如何在 JavaScript 中執(zhí)行頁(yè)面重新加載/刷新

到目前為止，我們已經(jīng)了解了 JavaScript 中 reload 是如何工作的。現(xiàn)在讓我們看看當(dāng)事件發(fā)生或發(fā)生按鈕點(diǎn)擊等動(dòng)作時(shí)如何實(shí)現(xiàn)這一點(diǎn)：

<button type="button" onClick="window.location.reload()">
   Reload Page
</button>

注意：這與我們使用document.location.reload().

如何在 JavaScript 中自動(dòng)刷新/重新加載頁(yè)面

我們還可以允許在固定時(shí)間后引用頁(yè)面，使用setTimeOut()如下所示的方法：

setTimeout(() => {
  document.location.reload();
}, 3000);

使用上面的代碼，我們的網(wǎng)頁(yè)將每 3 秒重新加載一次。

到目前為止，我們已經(jīng)了解了當(dāng)我們將其附加到特定事件時(shí)如何在我們的 HTML 文件中以及在我們的 JavaScript 文件中使用 reload 方法。

如何使用 JavaScript 中的歷史功能刷新/重新加載頁(yè)面

歷史功能是另一種刷新頁(yè)面的方法。歷史函數(shù)通常用于通過(guò)傳入正值或負(fù)值來(lái)向后或向前導(dǎo)航。

例如，如果我們想回到過(guò)去，我們將使用：

history.go(-1);

這將加載頁(yè)面并將我們帶到我們導(dǎo)航到的上一個(gè)頁(yè)面。但是如果我們只想刷新當(dāng)前頁(yè)面，我們可以通過(guò)不傳遞任何參數(shù)或傳遞0(中性值)來(lái)實(shí)現(xiàn)：

history.go();
history.go(0);

注意：這也與我們將reload()方法添加到setTimeOut()方法和 HTML 中的單擊事件中的方式相同。

在本文中，我們學(xué)習(xí)了如何使用 JavaScript 刷新頁(yè)面。我們還澄清了導(dǎo)致人們將布爾參數(shù)傳遞給reload()方法的常見誤解。如果大家想了解更多相關(guān)知識(shí)，不妨來(lái)關(guān)注一下本站的Java在線學(xué)習(xí)，里面的教程文檔細(xì)致全面，很適合沒有基礎(chǔ)的小伙伴學(xué)習(xí)，希望對(duì)大家能夠有所幫助。