<!DOCTYPE html> <html> <head> <title>Scoreboard</title> <link rel="stylesheet" href="style.css" type="text/css"> <script src="scoreboard.js" async></script> <style> body, html { width: 100%; height: 100%; overflow: hidden; cursor: none; } iframe { width: 100%; height: 100%; border: none; margin: 0; padding: 0; } </style> <script> var SECS = 1000, DELAY = 30*SECS; var urls = ["scoreboard.html"]; var stack = []; var i = 0; var xmlhttp; if (window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); } xmlhttp.onreadystatechange = function(){ if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ // update urls urls = JSON.parse(xmlhttp.responseText); console.log("new urls:", urls); } } xmlhttp.open("GET", "projections.json", true); xmlhttp.send(); function reload() { // alternate between scoreboard and other things if (i%2){ url = urls[0]; } else { if (stack.length === 0){ xmlhttp.open("GET", "projections.json", true); xmlhttp.send(); if (urls.length > 1){ stack = urls.slice(1); } else { stack = urls; } } url = stack.pop(); console.log("loading " + url + " of " + urls); } document.getElementById("reloader").src = url; i++; } function init() { setInterval(reload, DELAY); } window.addEventListener("load", init); </script> </head> <body> <iframe id="reloader" src="scoreboard.html"></iframe> </body> </html>