How do I refresh my html page every 2 mins? [duplicate] - javascript

This question already has answers here:
auto refresh for every 5 mins
(4 answers)
Closed 7 years ago.
I am currently using an html page for a webview within my iOS and Android apps. I don't want to update the native code and was wondering if I could just refresh the homepage which is index.html every 2 mins? Is it possible?

You can use:
<meta http-equiv="refresh" content="120">
The <meta http-equiv="refresh"> tag causes a web page to refresh
automatically after a specified amount of time. Users generally don't
expect automatic refreshes, so they can be disorienting. Refreshing
also moves focus to the top of the page, which may frustrate or
confuse users, particularly those who rely on screen readers or other
assistive technologies.
https://web.dev/meta-refresh/
Meta equiv refresh

You can try to use like this:
<meta http-equiv="refresh" content="120">
or you can use setInterval like this:
setInterval(function() {
window.location.reload();
}, 120000);

use this
setTimeout(function(){
window.location.reload(1);
}, 120000);
EDIT
Put this in head
<script>
setTimeout(function(){
window.location.reload(1);
}, 120000);
</script>
EDIT
to attach this function only when page is ready use this
<script>
$('document').ready(function(){
setTimeout(function(){
window.location.reload(1);
}, 120000);
});
</script>

You can Put meta tag before html start
e.g.
<meta http-equiv="refresh" content="120">
<html>
<head>
<meta charset="UTF-8">
<title>Mart</title>

Related

How to initiate a function once page has fully loaded to stop a loader [duplicate]

This question already has answers here:
Detect if page has finished loading
(10 answers)
Closed 2 years ago.
Please could someone help me with this set of code
How can I set an event.listener to initiate code when the page has finished loading.
At the moment I have used a setTimeOut but on slow connections the time out for the loader to disappear is too soon, I would like to do it without having to increase the interval time, to initiate the code only once the page and its content has finished loading.
I would greatly appreciate your help.
please see my code below
$('body').append('<div id="loadingDiv"><div class="loader"><img src="./images/loader/image.gif" alt="loadingImage"></div></div>');
let clearLoader = () => {
$("#loadingDiv").fadeOut(500, function () {
$("#loadingDiv").remove();
});
}
setTimeout(clearLoader, 2000);
You can use onload event for the window object like the vanilla javascript snippet below:
window.onload = function (){
console.log('Window finished loading.');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>After loading window</title>
</head>
<body>
</body>
</html>
OR
jQuery way:
$(window).load(function(){
console.log('Window finished loading.');
});

Javascript want to have a label that you can check for auto-refreshing the page [duplicate]

This question already has answers here:
Javascript Auto Refresh Toggle Checkbox
(3 answers)
How to reload page every 5 seconds?
(11 answers)
Closed 2 years ago.
I have tried to make a label, that when you 'check' it, it will auto-refresh the page every 5 seconds. I found a few threads but didn't get it to work! this is how I have done it so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<label>
<input
type="checkbox"
name="refresh"
autocomplete="off"
value="autorefreshoff"
id="refresh-btn"
onclick="refresh()"
/>
</label>
</body>
<script>
//Don't know what do do here, tried this:
function refresh() {
window.location.reload(1);
}
</script>
</html>
I am guessing that I have to make a loop in my javascript code with a delay on? So whenever this label is "checked" its gonna loop through the javascript code every 5 seconds, and if I would turn off the label its gonna stop looping.
Don't know javascript that well unfortunately.
Here's a basic example of how to load data every second using fetch, then updating the DOM. You need to adapt this to your needs.
setInterval(fetchNewData, 1000);
fetchNewData();
function fetchNewData() {
fetch('https://jsonplaceholder.typicode.com/todos/' + Math.floor(Math.random() * 10) + 1)
.then(r => r.json())
.then(r => document.getElementById('foo').innerHTML = `User title: ${r.title}`);
}
<div id="foo">
</div>
I think this is what you are looking for:
Javascript Auto Refresh Toggle Checkbox
Pls approve this answer if it was helpful!

Refresh page every couple minutes

I need to open 192.168.1.1 every couple of minutes. I have the following code but doesn't work:
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<script>
setInterval(function() {
location.replace("http://192.168.1.1")
}, 60 * 1000);
</script>
</body>
</html>
Adding to the iframe solution, in case you want it to open in a new tab
<script>
var URL = "http://example.com";
setInterval(function() {
var win = window.open(URL, "_blank");
/* uncomment if you want it to close
setInterval(function() {
win.close()
}, 1500);
*/
}, 2000);
</script>
like the iframe, not replacing the current tab ensures your code keeps running.
Your code won't work as you want it to, because once you change the location for the first time, it will load the router site and your code won't be executed anymore.
Since you can't control the router page code, you can load the router website into an iframe:
<iframe src="http://192.168.1.1"></iframe>
and put this in your <head> to refresh the site every 300 seconds:
<meta http-equiv="Refresh" content="300">
(adjust the number of seconds to your needs)

How to automatically refresh ejs page

Im new with ejs. As I was trying out an app. I want to refresh the page every 5 sec.
I got a code
<script language="javascript" type="text/javascript">
$(document).ready(function() {
setInterval("location.reload(true)", 5000);
});
</script>
But how to include jquery in ejs? How to embed this code in ejs page?
Try this
tags: <meta http-equiv="refresh" content="5">. That simple. The "5" is the number of seconds. If you want to increase the time to say 20 minutes, you simply put in "1200" and so on.

Changing the content of meta refresh does not change refreshing time

I have a meta http-equiv="refresh" inside the <head>.
<head>
<meta name="mymeta" http-equiv="refresh" content="2" id="myMeta">
</head>
Using Javascript, I'm trying to change the content attribute of this meta tag.
var myMeta = document.getElementById("myMeta");
myMeta.content="10";
When I display the content via document.write(myMeta.content);, I get the changed value which is 10, however, the meta tag will keep refreshing each 2 seconds.
I have tested this both in Firefox and Opera.
FULL PAGE
<!DOCTYPE html>
<html>
<head>
<meta name="mymeta" http-equiv="refresh" content="2" id="myMeta">
<script>
var myMeta=document.getElementById("myMeta");
myMeta.content="10";
document.write(myMeta.content);
</script>
</head>
<body>
</body>
</html>
This happens because the browser immediately process the <meta> tag when it is present onload.
See DEMO.
When the document is being loaded, the browser sees and processes the following:
<meta name="mymeta" http-equiv="refresh" content="2" id="myMeta"/>
Even though you try to change its content from 2 to 10, that 2 second refresh is already acknowledged and the browser waits for 2 seconds before it refreshes the page. The 10-second refresh that is injected by JavaScript actually works*, although the page has been refreshed by the time it reaches 2 seconds and nothing seems to happen. This process is then repeated again and again.
Try the opposite and see what happens.
*This only works on Safari and Chrome. Firefox and Opera does not support the modification of meta refresh through JavaScript.
The getElementsByTagName method returns a NodeList so you need to specify an index to correctly access the element:
var myMeta = document.getElementsByTagName("meta")[0];
As someone mentioned this will probably still not work as the meta tag will need to be re-appended to have the desired effect.
Since you're using JavaScript you can just use setTimeout to achieve the same behavior
setTimeout(function() {
location.reload();
},2000); // reload page after 2 seconds

Categories