I have a link to a page. The loading is slow and on click event i show a progress bar and run a timing loop with random text. I do this with setInterval. I change the text every 8 seconds.
When the loading is completed, the browser shows the new page.
I don't clear Interval because i think the new page doesn't share anything with the previous page.
But, if i click on the previous button on Firefox, it seems to remember the there was an intervarl and it runs it again.
In Chrome, the prevoius button seems to reload the page and the interval there isn't.
Why Firefox has this behavoiur?
You can see the page here:
http://www.demo.tinnservice.com:8090/
I set the interval on click to "Ricerca Avanzata"
This is the html tag
<a class="linkSlow" data-action="archivio" href="/archivio">Ricerca avanzata</a>
This is the javascript code:
function smokeInTheEyes(element){
$("body").css("position","relative");
$("#wait-overlay").addClass("in");
var frasi=frasiObj[element.data("action")];
var i=0;
setTimeout(function(){$("#frase").text(frasi[i]).show("400");},1000)
var timer=setInterval(function(){
i+=1;
console.log(i);
if(i==frasi.length){i=0;}
$("#frase").hide("400",function(){$("#frase").text(frasi[i]).show("400")});
}, 8000);
}
$(".linkSlow").click(function(e){
smokeInTheEyes($(this));
});
PS: Frasi is an object with two or more array of strings. The data-action attribute on the clicked tag tell me which array i use to display the random text
Possible ducplicate:
Force Firefox to Reload Page on Back Button
This is the accepted answer created by jknair:
add this between your HEAD tags
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
Related
I would like to build a webpage button which if clicked reloads the webpage every x seconds (i.e. 5 seconds = 5000 ms). The Problem is that my function gets executed once after 5 seconds, but wont continue to auto refresh after the button was clicked. It always waits for the next button click.
In theory I know that after the click my function has to be called every x seconds, but I simply don't know how to implement this.
This is how far i got:
<html>
<head>
</head>
<body>
<button id = "btn-reload">Automatischer Reload der Seite</button>
<script>
const btnReload = document.getElementById("btn-reload");
btnReload.addEventListener("click", function(){
setInterval(function(){
location.reload()}, 5000);
});
</script>
</body>
</html>
While you refreshing page all state is cleared so also interval not exist. To make it work you need something which will save the state between refresh for example local storage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
You can use URL as your flag if auto refresh is enabled.
Example your-url.com?autorefresh=true
on window load check this flag is set or not to run your auto refresh feature
I have a webpage and it has a Refresh Button. I need to click the button every 5 minutes. The Normal Refresh or Reload or F5 doesn't work in this situation. Is there a way that Javascript can do this task.
Like, I will save the javascript as Bookmark and once I click the bookmark. Then, the javascript event has to click the refresh button every 5 minutes.
I googled it and I found the below code. But, it doesn't work. When I click on it, it just showing a random number in a blank page.
javascript:if(window.autoRefreshInterval) { clearInterval(window.autoRefreshInterval); };
window.autoRefreshInterval = setInterval(function() { jQuery(".refresh").click(); },60000)
thank you in advance,
"I have a webpage and it has a Refresh Button. I need to click the
button every 5 minutes. The Normal Refresh or Reload or F5 doesn't
work in this situation. Is there a way that Javascript can do this
task."
It's not very clear to me, but every time you refresh a webpage, javascript is loaded again. So if you have intervals or variables they are reset at each refresh. If you want to keep some value among refreshs you can store values using localStorage or cookies for example.
If you want refresh automatically page you can use setInterval or metatag "refresh".
"Like, I will save the javascript as Bookmark and once I click the
bookmark. Then, the javascript event has to click the refresh button
every 5 minutes."
Look at this: Add a bookmark that is only javascript, not a URL
you can call your refresh code function or button click event in
setTimeout(yourFucntion(),5000);
else
setTimeout($("#btnName").click(),5000);
Try below code:
<!DOCTYPE html>
<html>
<body onload="f1()">
<script language ="javascript" >
var tmp;
function f1() {
tmp = setInterval(() => f2(), 2000); // replace this with 5 min timer
}
function f2() {
document.getElementById("Button1").click();
}
function f3() {
console.log("Hello World");
}
</script>
<button id="Button1" onclick="f3()">click me</button>
<div id="demo"></div>
</body>
</html>
There are two versions for you to try, one uses javascript to click the button the other automates running the function that they have tied to the button.
Non jQuery:
javascript:(function(){if(window.autoRefreshInterval) {clearInterval(window.autoRefreshInterval);}window.autoRefreshInterval = setInterval(function(){document.getElementsByClassName("refresh")[0].addEventListener('click');},60000);})()
Or with jQuery (OP's comment on original thread):
javascript:(function(){if(window.autoRefreshInterval) {clearInterval(window.autoRefreshInterval);}window.autoRefreshInterval = setInterval(function(){$ctrl.refresh();},60000);})()
Delayed post, but hopefully it helps someone :-).
The trick for me was locating the element by css document.querySelector('.pbi-glyph-refresh').click();
You can combine this with the original code like so, it correctly clicks the PowerBI refresh button on a 60 second timer (the var is in ms).
javascript:if(window.autoRefreshInterval) { clearInterval(window.autoRefreshInterval); };
window.autoRefreshInterval = setInterval(function() {document.querySelector('.pbi-glyph-refresh').click(); },60000)
In a part of my website I have last minute information, which should show up on ever page.
To do this I have a file named "LM_overzicht.html" which I load and display in a div like this:
$(document).ready(function(){
$("#LM2").load("LM_overzicht.html")
});
<div id="LM2"></div>
But when I change 'LM_overzicht.html' the changes won't show up when I refresh a page, only ctrl+F5 will do the trick.
So I put in some other tricks which I got from stackoverflow
first this part in HTML:
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
But still it don't show the changes after a refresh.
I also tried another trick in JS
<script>
$(document).ready(function(){
$.ajaxSetup ({
// Disable caching of AJAX responses
cache: false
});
$("#LM2").load("LM_overzicht.html")
});
</script>
But this doesn't clear the cache either. Anyone an idea how to fix this?
my site: Link to my site, where this 'last minute' part is at the bottom of the page
You could add a timestamp behind the file so it never gets cached.
For example LM_overzicht.html?t=1
So append a generated timestamp with JavaScript. Note that this way the HTML file will never get cached, which I dont recommend. If you still want to do so, you could always just append the day instead of the whole timestamp..
Example code to prevent caching:
$("#LM2").load("LM_overzicht.html?t=" + Math.floor(Date.now() / 1000));
So I'm testing this ephemeral images functionality in an HTML document (a la Snapchat).
My images are visible for X seconds, after which the page reloads and the displayed images are gone. Sidestepping the myriad ways someone can save an image like that, I'm squarely focused on the refresh functionality at the moment.
My JS code to refresh the page is as follows:
<script>
window.setTimeout(function () {
window.location = "example.com/page.html?nocache=" + (new Date()).getTime();
}, 5000); // refresh/redirect after 5 seconds.
</script>
I've written code that destroys the image after a single refresh - so the above trigger works perfectly. But the problem is the back button on the browser. If you press it, you simply get to see the image again. Game over!
I've already included the following meta tags in my HTML document, but they're not helping:
<meta http-equiv="Cache-Control" content="max-age=0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
Is there any way to ensure the browser back button is removed from the equation, or its effect neutralized? Please advise.
Don't refresh the page, instead use simple DOM manipulation to remove the image. If you have jQuery loaded, you can easily do it like so:
<script>
window.setTimeout(function () {
$( 'img' ).remove();
}, 5000); // refresh/redirect after 5 seconds.
</script>
(You'll want to use a more specific selector if you have more than one image on the page)
To load a new image in this context, you'll need to use an AJAX request, and set a new timer. But this will cause the back button to not bring the image back.
Here is my code
{phrase var='feed.1_new_update'}
I want the action of Onclik to be performed automatically in an interval of 10 seconds without clicking anything
I want to replace ONCLICK by setInterval but I don't know how to do it for it to work properly.
The Code is from an Activity Feed that needs a click to upload new feed updates, what I want is the feed update to load automatically without click. I want any there is a new activity I want to upload automatically on the page
setInterval(function() {
document.getElementById("activity_feed_updates_link_single").click()
}, 10000);
This should do what you want.
It registers an event listener which will fire after the document content is loaded.
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">window.addEventListener('DOMContentLoaded',
function(event) { setInterval(function() {
alert('time flies when you\'re having fun');
}, 1e4);
}, false);</script></head><body></body></html>
Save this code as HTML document, e.g. interval.html, and open it in your browser.
See
https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
MDN is a great resource of definitive information!
Might want to add MDN as a search engine:
https://developer.mozilla.org/en-US/search?q=setInterval