Introduction

Refreshing web page is simple like just press F5 or Ctrl + R but what if you want to refresh the page automatically after certain time? You can use JavaScript to do that. In this article, I will show you how to refresh the web page automatically using JavaScript.

Prerequisites

Basic knowledge of HTML, CSS, and JavaScript
Text editor like Visual Studio Code
Web browser like Google Chrome

Refreshing Web Page With JavaScript

To refresh the web page automatically using JavaScript, you can use location.reload() method. This method reloads the current document. Here is the code to refresh the web page after 5 seconds.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Refresh Web Page</title>
</head>
<body>
    <h1>Refresh Web Page</h1>
    <p>This web page will refresh after 5 seconds.</p>

    <script>
        setTimeout(() => {
            location.reload();
        }, 5000);
    </script>
</body>
</html>

In the code above, I use setTimeout() method to call location.reload() method after 5 seconds. The setTimeout() method takes two arguments, a function and a time in milliseconds. The function will be called after the time has passed.

Refreshing Web Page With JQuery

If you are using JQuery, you can use location.reload() method as well. Here is the code to refresh the web page after 5 seconds using JQuery.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Refresh Web Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Refresh Web Page</h1>
    <p>This web page will refresh after 5 seconds.</p>

    <script>
        $(document).ready(function() {
            setTimeout(() => {
                location.reload();
            }, 5000);
        });
    </script>
</body>

</html>

Refresh using trigger button

You can also add a button to refresh the web page. Here is the code to refresh the web page when the button is clicked.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Refresh Web Page</title>
</head>
<body>
    <h1>Refresh Web Page</h1>
    <p>This web page will refresh after 5 seconds.</p>

    <button onclick="location.reload()">Refresh</button>
</body>
</html>

Conclusion

Refreshing web page automatically using JavaScript is simple. You can use location.reload() method to refresh the web page. You can also use setTimeout() method to refresh the web page after certain time. I hope you find this article helpful.

Happy coding! 🚀

Reference

Online database design

How To Refreshing Web Page With JS