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.
Related
How can i make redirect without clicking.
i want to do it automatically
<script>
$("#Div3").click(function(){
window.location.replace("http://your.next.page/");
});
</script>
If you want to redirect as soon as the page is loaded, you can use
$( document ).ready(function() {
window.location.replace("http://your.next.page/");
});
or you can use window.location.href to simulate a mouse click, whereas .replace simulates a HTTP redirect from the server, if that matters to you.
you can add in the header :
<head>
<meta http-equiv = "refresh" content = "3; url = http://your.next.page/" />
</head>
source
You can use window.location.replace("http://your.next.page/");
directly so that the page is reloaded as soon as the javascript code is read.
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));
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">
I want to refresh a web page using javascript but when any event occur after few second the page will refresh.
what can i do?
You can try setTimeout()
setTimeout(function() {
// Do something after 5 seconds
location.reload();//reload page
}, 5000);
Use meta tag like <meta http-equiv="Refresh" content="300">
This wiil make your page to refresh every 5minutes (5*60)
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