更新時間:2022-10-09 10:45:14 來源:動力節點 瀏覽2780次
當您開發像博客或頁面這樣的應用程序時,數據可能會根據用戶操作而改變,您會希望該頁面經常刷新。
當頁面刷新或重新加載時,它將顯示基于這些用戶交互的任何新數據。好消息——你可以用一行代碼在 JavaScript 中實現這種類型的功能。
在本JavaScript教程中,我們將學習如何在 JavaScript 中重新加載網頁,并了解我們可能希望實現這些重新加載的其他一些情況以及如何執行此操作。
您可以使用location.reload()JavaScript 方法重新加載當前 URL。此方法的功能類似于瀏覽器的刷新按鈕。
該reload()方法是負責頁面重新加載的主要方法。另一方面,location是一個接口,表示它鏈接到的對象的實際位置(URL)——在這種情況下,是我們要重新加載的頁面的 URL。可以通過document.location或訪問它window.location。
以下是重新加載頁面的語法:
window.location.reload();
注意:當您閱讀有關“JavaScript 中的頁面重新加載”的一些資源時,您會遇到各種解釋,說明 relaod 方法接受布爾值作為參數,并location.reload(true)幫助強制重新加載以繞過其緩存。但事實并非如此。
根據MDN 文檔,布爾參數不是當前規范的一部分location.reload()——事實上,它從未成為任何已location.reload()發布規范的一部分。
另一方面,Firefox 等瀏覽器支持使用稱為forceGetfor的非標準布爾參數location.reload(),它指示 Firefox 繞過其緩存并強制重新加載當前文檔。
除 Firefox 外,您location.reload()在其他瀏覽器中調用時指定的任何參數都將被忽略且無效。
到目前為止,我們已經了解了 JavaScript 中 reload 是如何工作的。現在讓我們看看當事件發生或發生按鈕點擊等動作時如何實現這一點:
<button type="button" onClick="window.location.reload()">
Reload Page
</button>
注意:這與我們使用document.location.reload().
我們還可以允許在固定時間后引用頁面,使用setTimeOut()如下所示的方法:
setTimeout(() => {
document.location.reload();
}, 3000);
使用上面的代碼,我們的網頁將每 3 秒重新加載一次。
到目前為止,我們已經了解了當我們將其附加到特定事件時如何在我們的 HTML 文件中以及在我們的 JavaScript 文件中使用 reload 方法。
歷史功能是另一種刷新頁面的方法。歷史函數通常用于通過傳入正值或負值來向后或向前導航。
例如,如果我們想回到過去,我們將使用:
history.go(-1);
這將加載頁面并將我們帶到我們導航到的上一個頁面。但是如果我們只想刷新當前頁面,我們可以通過不傳遞任何參數或傳遞0(中性值)來實現:
history.go();
history.go(0);
注意:這也與我們將reload()方法添加到setTimeOut()方法和 HTML 中的單擊事件中的方式相同。
在本文中,我們學習了如何使用 JavaScript 刷新頁面。我們還澄清了導致人們將布爾參數傳遞給reload()方法的常見誤解。如果大家想了解更多相關知識,不妨來關注一下本站的Java在線學習,里面的教程文檔細致全面,很適合沒有基礎的小伙伴學習,希望對大家能夠有所幫助。
0基礎 0學費 15天面授
有基礎 直達就業
業余時間 高薪轉行
工作1~3年,加薪神器
工作3~5年,晉升架構
提交申請后,顧問老師會電話與您溝通安排學習