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

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 :-)

Related

How to set redirect to links provided by JS function

I'm having an issue where I'm trying to set a page's redirect destination to a URL from a JS function.
I've tried calling the function by using <meta http-equiv="refresh" in the header, but I either have the syntax wrong or <meta> simply doesn't allow for calling functions. I'm honestly not sure.
<head>
<script src="extFile.js"></script>
<meta http-equiv="refresh" content="1; go2();" id="levP" name="levP">
<title>SO Question</title>
</head>
go2() is a function from extFile.js which contains an if/then statement that provides different URLs depending on time of day. I'd like to have index.html redirect users via function go2() either by a method in the header or in the body.
If this should be handled in the body then I'd appreciate any feedback as to how that should look.
Like this? this code will redirect your page after 5 seconds
<head>
<script src="extFile.js"></script>
<script>
setTimeout(function (){
window.location = "https://stackoverflow.com/questions/57717282/how-to-set-redirect-to-links-provided-by-js-function";
}, 5000);
</script>
<title>SO Question</title>
</head>
if you want a to call a function do this:
<head>
<script src="extFile.js"></script>
<script>
var check = function(){
window.location = "https://stackoverflow.com/questions/57717282/how-to-set-redirect-to-links-provided-by-js-function";
}
check();
</script>
<title>SO Question</title>
</head>

Load image using Javascript?

Here's the current code of my HTML page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<meta name="robots" content="noindex, nofollow">
<meta http-equiv="refresh" content="3;URL='http://google.com'" />
</head>
<body>
<script>
var image = document.images[0];
var downloadingImage = new Image();
downloadingImage.onload = function(){
image.src = this.src;
};
downloadingImage.src = "http://example.com/pixel";
</script>
<script>
window.location = "http://google.com";
</script>
</body>
</html>
This part of the code should be using Javascript to load an image:
var image = document.images[0];
var downloadingImage = new Image();
downloadingImage.onload = function(){
image.src = this.src;
};
downloadingImage.src = "http://example.com/pixel";
This is being done to verify is a user has javascript enabled or not. We direct visitors to specific advertisers and certain ones require that Javascript be enabled. The pixel that's being loaded is so we can track fraudulent traffic from third-party vendors that try to send millions of bot hits using stuff like curl.
The amount of users with javascript enabled is slightly lower than I expected and I'm not trying to debate the amount. But does anyone see anything wrong with this code?
It's my understanding that javascript loads in order, so the image should be loaded in a browser before the user is redirected, correct? And do you see anything wrong in the code that I guess would cause it to not load in certain browsers?
While the script is executed in order, the loading of images is non-blocking. As a result, setting the image.src to something does not wait for that image to load before moving on. You need to determine when you'd like to be redirected, and place that code inside the image's onload function. Try this:
Wrap your refresh tag in <noscript></noscript> (only valid for html5)
Modify your code to this:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<meta name="robots" content="noindex, nofollow">
<noscript>
<meta http-equiv="refresh" content="3;URL='http://google.com'" />
</noscript>
</head>
<body>
<img src="//example.org/pixel1">
<script>
var image = document.images[0];
var downloadingImage = new Image();
downloadingImage.onload = function(){
console.log('downloadImage loaded');
image.onload = function(){
console.log('image loaded');
window.location = "http://google.com";
}
image.src = this.src;
};
downloadingImage.src = "//example.com/pixel2";
</script>
</body>
</html>

reading from text file with ajax works on some servers but not others?

I'm running into a very strange problem.
I should probably start by pointing out I'm sorta new to ajax.
Through lots of reading on here and all of you experts, I've managed to create a script that through ajax calls allows me read a text file on my server that contains links to images. These images are then displayed on my html page.
It may seem a strange thing to do, but I have actually created a windows program that writes to this text file frequently. This allows my html page to have dynamic images displayed based on the text output from my windows program.
Now, the problem...
When the text file is sitting on my dropbox public folder, the website works great. Ajax pulls the text from within the text file and displays the images.
Now when I take that SAME text file, and ftp it up to my ubuntu server, Ajax no longer reads the text file. All other configurations remain the same except the ajax URL src of course pointing to the new text file location.
Code that works:
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex,nofollow" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url : "https://dl.dropboxusercontent.com/u/********/status.txt",
dataType: "text",
success : function (data) {
console.log(data)
var lines = data.split(",")
for (var i = 0; i < lines.length; i++) {
var img = $('<img class="dynamic">');
img.attr('src', lines[i]);
img.appendTo('#status');
}
}
});
});
</script>
</head>
<body>
<div id="status"></div>
</body>
</html>
And the code that doesn't work (all images and text files the same except text file hosted on a different server)
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex,nofollow" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url : "http://a-different-server.com/status.txt",
dataType: "text",
success : function (data) {
console.log(data)
var lines = data.split(",")
for (var i = 0; i < lines.length; i++) {
var img = $('<img class="dynamic">');
img.attr('src', lines[i]);
img.appendTo('#status');
}
}
});
});
</script>
</head>
<body>
<div id="status"></div>
</body>
</html>
Is this have something to do perhaps with mime-types or some setting on my server?
Thanks for all your help!
As JanR suggestion, this was cross domain problem. This was resolved by adding CORS support to the server, according to the instructions here: http://enable-cors.org/server_apache.html

Stopping the page refresh - not working with clear function

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

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