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

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

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

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

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

該reload()方法是負責(zé)頁面重新加載的主要方法。另一方面，location是一個接口，表示它鏈接到的對象的實際位置(URL)——在這種情況下，是我們要重新加載的頁面的 URL。可以通過document.location或訪問它window.location。

以下是重新加載頁面的語法：

window.location.reload();

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

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

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

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

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

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

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

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

如何在 JavaScript 中自動刷新/重新加載頁面

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

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

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

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

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

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

例如，如果我們想回到過去，我們將使用：

history.go(-1);

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

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

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

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