Member Avatar for muppet

I'm running a webpage dashboard on a TV on the production floor of our factory so workers can see their live uptime, scrap etc.

I need the page to refresh when new data is available.

I want to load a page in a hidden iframe every x seconds, if the iframe is blank then do nothing but if there is a URL in the iframe then load that URL in the main page.

Example:
The Main page dashboard_Machine3.html calls a page in a hidden iframe newdata_Machine3.html every 10 seconds. If it sees that the newdata_Machine3.html page is blank, then nothing is done. If newdata_Machine3.html contains text eg "dashboard_Machine3.html" or "fire_alarm.html" then load that page in the main window.

This way I can jump to another screen if there is a critical problem somewhere or refresh that same page if there is new data to display.

-- Sorry if I wasn't clear, its a tricky one to explain :confused:

Is this possible?

  • 2 Contributors
  • 3 Replies
  • 184 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by muppet

Dani AI

Generated

Nice, simple solution from and confirmed by — using a hidden page to tell the main page what to load is a practical approach for a kiosk/TV dashboard. It is quick to implement and needs almost no server work: the hidden document can either remain empty or contain a command that causes the main window to navigate.

A few things to watch for. If the parent needs to read an iframe's DOM, the iframe must be same-origin; otherwise the browser prevents reads. An iframe can also be sandboxed, which by default blocks top-level navigation unless you add allow-top-navigation or allow-top-navigation-by-user-activation. For security, never blindly navigate to whatever the server returns — use a short, server-controlled token or a whitelist on the client so an attacker cannot force arbitrary redirects.

If you want a slightly more modern, robust pattern than polling an iframe, have the server expose a tiny endpoint that returns either nothing or a target path, and poll it with fetch (no-cache). For example:

setInterval(async () => {
  const r = await fetch('/check', {cache: 'no-store'});
  if (!r.ok) return;
  const url = (await r.text()).trim();
  const allowed = ['/dashboard_Machine3.html','/fire_alarm.html'];
  if (url && allowed.includes(url)) location.href = url;
}, 5000);

For critical or frequent updates, prefer push: Server-Sent Events (EventSource) or a WebSocket remove polling latency and load. They let the server tell the dashboard instantly when to switch screens.

Operational tips: pick a sane interval (5-30s for status, 1s only for true real-time needs), set proper Cache-Control headers on the server, test behavior in your TV/browser (some embedded browsers prompt or block navigations), and log transitions so you can audit false alarms.

Recommended Answers

All 3 Replies

Member Avatar for muppet

hmm, no takers...

How about this then:

Page A is displayed on a TV showing some charts and info.
Page B is not displayed anywhere but contains the text "0"
As soon as page B contains the text "1", then refresh page A

Is there any way to so this?

By watching page B using a hidden iframe, then triggering a refresh event depending on its contents was my thought. But I'm no web developer.

Thanks anyway

Member Avatar for almostbob

iframe code for no problem

<html></html>

iframe code for problem condition

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><script type='text/javascript'>
<!-- 
top.location = 'location of selected problem page'
//--></script></head><body></bopdy></html>
Edited by almostbob because: n/a
Member Avatar for muppet

That works great! Now I can remote control my web browser without constant refreshes.

Thanks almostbob


Here is the code I used on the main page1. Main page2 looked the same but with different content.

<html> 
<head> 
<script type="text/javascript">
    function refreshiframe() 
    { 
        parent.frame1.location.href="/sub.html" 
        setTimeout("refreshiframe()",1000); 
    } 
</script>
</head>


<body bgcolor="#ffffff" onLoad='refreshiframe()'> 
Main Page1 content

<IFRAME id="frame1" src="/sub.html" style="width:0px; height:0px; border:0px">
</body> 
</html>
Edited by muppet because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.