Stopping the page refresh - not working with clear function - javascript

This is code to display a spinner while image is loading and then show the image when it is done. Also, this page needs to be auto-refreshed every 5 seconds and the refreshing to be stopped at 11 seconds, ie refresh twice alltogether. But this doesn't work. The spinner code is in the css file. This does not work - keeps refreshing over and over - the timeout gets reset, tried using var to assign as well no joy. Any help appreciated highly.
<META HTTP-EQUIV="Cache-Control" CONTENT="max-age=0">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META http-equiv="expires" content="0">
<META HTTP-EQUIV="Expires" CONTENT="Tue, 01 Jan 1980 1:00:00 GMT">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<html>
<head>
<link rel="stylesheet" href="/css/graph.css" type="text/css" media="screen, projection">
<script src="/javascript/jquery-latest.js" type="text/javascript">
</script>
<script type="text/javascript">
var img = new Image(); img.height=600; img.width=2000;
$(img).load(function () {
$(this).css('display','none');
$(this).animate({ opacity: 0.25 }).fadeIn("slow");
$('#loader').append(this);
$(this).animate({ opacity: 1 })
}).error(function () {
}).attr('src', 'xyz.png');
var timer = function() { window.location.reload(true);};
window["reload_timer"] = setTimeout(timer, 5000);
var timer2 = function() {
clearTimeout(window["reload_timer"]);
clearTimeout(window["reload_timer2"]);};
window["reload_timer2"] = setTimeout(timer2, 11000);
</script>
</head>
<body id = "page"><div id="loader" class="loading">
</div>
</body>
</html>

You could try reloading the page URL with a parameter attached to it. Then you could read in the parameter with JavaScript and use that to know how many times the page has refreshed so you stop after 2 refreshes.
Otherwise the page is stateless - the same exact page will load as before, with no knowledge if it was already loaded or not. By introducing this URL parameter you can track some sort of state.

When you reload the page, the page forgets it has already been reloaded, so in fact your code never reaches timer2

Related

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 can I change my code to be able to calculate different urls instead of the current page

I'm trying to calculate the load time and page size of different URLs/Pages similar to the developer tools performance tab but in javascript. But the current code only calculates its current page instead of a different URL. Is there any way for me to do this because with my research I have no luck.
<html>
<head>
<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">
<script type="text/javascript">
var start = new Date().getTime();
function onLoad() {
var now = new Date().getTime();
var latency = now - start;
alert("page loading time: " + latency+"\n"+"Start time:"+start+"\n"+"End time:"+now);
alert("Load_size:"+document.getElementsByTagName("html")[0].outerHTML.length + "KB");
}
</script>
</head>
<body onload="onLoad()">
<!- Main page body goes from here. -->
</body>
</html>
It will not be possible to read the runtime parameters of a page outside the page your javascript is running on.
Part of the security model is to avoid being able to inspect the runtime of other pages. This is called the "sandbox". You'll need to build a plugin that breaks the sandbox to inspect the domLoad / domReady and other performance events.
Good news though, you probably have one built in! The console for modern browsers shows all those events in the timeline tab.
If you're trying to make a service that attempts to evaluate the runtime of other pages, you'll need to load those in a virtual web browser on the server and interpret the results using selenium or something similar.
You can try this to calculate the load time of a page:
<script type="text/javascript">
$(document).ready(function() {
console.log("Time until DOMready: ", Date.now()-timerStart);
});
$(window).load(function() {
console.log("Time until everything loaded: ", Date.now()-timerStart);
});
</script>
edit: this will only work on pages where this JS code will run, so if you cant insert code onto the page you wont be able to run it.

How to automatically refresh external data loaded into Javascript variables in HTML?

I have digital information written as Javascript variables by PHP into a .txt-File. This information gets changed by a user at a different interval.
var ISTUHSXDATE8 = '21.1.2018';
var ISTUHSXTIME8 = '20:11';
var ISTUHSXROT8 = 0;
var ISTUHSXGELB8 = 0;
var ISTUHSXGRUEN8 = 1;
var ISTUHSXAUSLASTUNG8 = '0%';
To show actual information in the HTML body, it´s necessary to make the HTML document load the latest version of .txt from server. [At the moment handmade by push the button and in webprojekt by setInterval() automatically]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv='cache-control' content='no-cache'>
<script type="text/javascript" id="id_of_java_var"></script>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var dsts = new Date();
document.getElementById("id_of_java_var").src =
"https://www.juh-technik.de/StreifenstatusEA1.txt?time" + dsts.getTime();
}
</script>
</body>
</html>
With this code I can load latest version from the server for several .gif/.jpg/.html files by pushing the refresh button. The Problem is, this don´t works with .txt-files.
So my question is, how to refresh src of following line without page reload.
<script src="https://www.juh-technik.de/StreifenstatusEA1.txt" type="text/javascript" id="id_of_java_var"></script>
Thanks for your help :-)

HTML5 video canPlay event not working second time

I am working on some site in php. The pages are loaded through ajax. One of the pages has HTML5 video. Before the video can play I show a loader on top of it. Once it goes in the canPlay event I remove the loader div. But the problem is, when I come on this page for the first time it works fine and goes into the canplay function. But if I go to the next page and come back it doesn't go into the canplay function at all show the loading image does not get removed.
Can anyone please help me and tell me a solution for this. Thanks in advance.
var videoObj = document.getElementById('video');
jQuery('.moduleBody').append('<div class="videoLoader" id="videoLoadingDiv"><img src="images/loader.gif" /></div>');
jQuery(videoObj).on('canplay', function(){
jQuery('#videoLoadingDiv').remove();
});
Regards,
Neha
I found out what the issue was. The video was getting cached so on refresh also it used to remain cached in the browser. So what I have done is, I am passing a random value as a parameter in the src of the 'video' tag. So now the video does not get cached in the browser and it goes inside the canPlay() function.
Anyways thanks for your answers.
Regards,
Neha
There is a lot of code missing but I would put your script in side this
$( document ).ready(function() {
console.log( "ready!" );
});
also consider using .hide(); rather than .remove();
The use the Use the $(window).unload(function(){}); method
Could not hurt to add this then
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

Refresh iFrame (Cache Issue)

We are getting a weird issue on which we are not sure what exactly cause it. Let me elaborate the issue. Suppose, we have two different html pages a.html and b.html. And a little script written in index.html:
<html>
<head>
<script>
function reloadFrame(iframe, src) {
iframe.src = src;
}
</script>
</head>
<body>
<form>
<iframe id="myFrame"></iframe>
<input type="button" value="Load a.html" onclick="reloadFrame(document.getElementById('myFrame'), 'a.html')">
<input type="button" value="Load b.html" onclick="reloadFrame(document.getElementById('myFrame'), 'b.html')">
</form>
</body>
</html>
A server component is continuously updating both files a.html and b.html. The problem is the content of both files are successfully updating on the server side. If we open we can see the updated changes but client getting the older content which doesn't show the updated changes.
Any idea?
Add this in a.html and b.html
<head>
<meta http-Equiv="Cache-Control" Content="no-cache" />
<meta http-Equiv="Pragma" Content="no-cache" />
<meta http-Equiv="Expires" Content="0" />
</head>
To force no cache checks
If you can add server-side instructions to those HTML files, you could send the appropriate headers to prevent caching:
Making sure a web page is not cached, across all browsers (I think the consensus is that the 2nd answer is best, not the accepted one)
Simone's answer already deals with Meta tags.
A cheap quick trick is to add a random number as a GET parameter:
page_1.html?time=102398405820
if this changes on every request (e.g. using the current time), reloading wil get forced every time, too.
Try something like the following:
<script>
var frameElement = document.getElementById("frame-id");
frameElement.contentWindow.location.href = frameElement.src;
</script>
This will force the iframe to be reloaded even if it was cached by the browser
I want to put Vishwas comment as a separate answer, extending
Pekka’s answer
//ensure iframe is not cached
function reloadIframe(iframeId) {
var iframe = document.getElementById(iframeId);
var d = new Date();
if (iframe) {
iframe.src = iframe.src + '?ver=' + d.getTime();
//alternatively frameElement.contentWindow.location.href = frameElement.src; //This will force the iframe to be reloaded even if it was cached by the browser
}
}
reloadIframe('session_storage_check');
Homero Barbosa's Solution worked like a charm. In my case, I had a varying number of iframes on the page, so I did the following:
$('.some_selector').each(function () {
var $randid = Math.floor(Math.random() * 101);
$(this).attr({'id': 'goinOnaSafari-' + $randid});
var $frame = document.getElementById('goinOnaSafari-' + $randid);
$frame.contentWindow.location.href = $frame.src;
});
I could not get the HTML to work.
<head>
<meta http-Equiv="Cache-Control" Content="no-cache" />
<meta http-Equiv="Pragma" Content="no-cache" />
<meta http-Equiv="Expires" Content="0" />
</head>
For development in chrome I checked the console Network tab and found where the iframe is loaded.
I confirmed that it was loaded with a 304 response wich means it loads from cache.
Right click -> clear browser cache.
Will not work in production, but at least helps with development.
For one possible solution to this, pass a "cache parameter" to your calls to a.html and b.html. For example
HTML
<input type="button" value="Load a.html" onclick="cacheSafeReload('a.html');">
Javascript
function cacheSafeReload(urlBase) {
var cacheParamValue = (new Date()).getTime();
var url = urlBase + "?cache=" + cacheParamValue;
reloadFrame(document.getElementById('myFrame'), url);
}

Categories