Hi makenzi.exc,
meta Tag
It is simple and easy to implement but less flexible.
Once set, it cannot be easily modified without reloading the page.
Without any scripts, it works directly in HTML.
It is compatible with all browsers.
For larger or complex pages, it is less efficient as it refreshes the entire page.
setInterval
Provides greater control and flexibility.
You can adjust the refresh interval dynamically, stop the refresh with clearInterval.
If JavaScript is disabled in the browser, this method will not work as it work with JavaScript.
Can be used to refresh only specific parts of the page instead of complete page.
Refer below example.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="refresh" content="3">
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; padding-left: 20px; }
</style>
</head>
<body>
<h3>Refresh using meta Tag</h3>
<span id="lblDateTime"></span>
<script type="text/javascript">
window.onload = function () {
document.getElementById("lblDateTime").innerHTML
= "Page refreshed at: " + new Date().toLocaleString();
};
</script>
<hr />
<h3>Refresh using setInterval function</h3>
<span id="lblDateTimeSetInterval"></span>
<script type="text/javascript">
document.getElementById("lblDateTimeSetInterval").innerHTML
= "Page refreshed at: " + new Date().toLocaleString() + " using SetInterval";
setInterval(function () {
window.location = window.location.href;
}, 3000);
</script>
</body>
</html>
Demo
Screenshot
Downloads
Download Sample
