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! 🚀
Top comments (3)
The reference link at the end of your article is broken.
After Googling it, the link seems to be completely unrelated? This might be considered a violation of the Terms of Service:
Some comments may only be visible to logged-in visitors. Sign in to view all comments.