Auto Web Page Changer using iframe
Monday, May 23rd, 2011Oh I like this. In seeking to setup a rolling web browser display display at work, I came upon this small but very clever bit of javascript, which on a timer will change the web page being viewed inside an iframe. Just edit the defaults to you preferred pages and timings and away you go:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Changing Pages… Please Wait</title>
<script type=”text/javascript”>
var frames = Array(’http://www.google.com/’, 15,
‘http://www.yahoo.com/’, 15,
‘http://www.ask.com/’, 15,
‘http://www.dogpile.com/’, 15);
var i = 0, len = frames.length;
function ChangeSrc()
{
if (i >= len) { i = 0; } // start over
document.getElementById(’frame’).src = frames[i++];
setTimeout(’ChangeSrc()’, (frames[i++]*1000));
}
window.onload = ChangeSrc;
</script>
</head>
<body>
<iframe src=”" name=”frame” id=”frame” width=”100%” height=”100%”></iframe>
</body>
</html>
I had to put a fixed height in there as 100% wasn’t giving 100% just 10% at the top of the page. This script repeats adinfinitum. If you only want it to run once, use this one:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Changing Pages… Please Wait</title>
<script type=”text/javascript”>
var frames = Array(’http://www.google.com/’, 15,
‘http://yahoo.com/’, 15,
‘http://www.ask.com/’, 15,
‘http://dogpile.com/’);
var i = 0, len = frames.length;
function ChangeSrc()
{
document.getElementById(’frame’).src = frames[i++];
if (i >= len) return; // no more changing
setTimeout(’ChangeSrc()’, (frames[i++]*1000));
}
window.onload = ChangeSrc;
</script>
</head>
<body>
<iframe src=”" name=”frame” id=”frame” width=”100%” height=”100%”></iframe>
</body>
</html>
and it gets better! Now the next set of code does the rolling web pages, with no border on the iframe, no scrollbar on the iframe, and with a fix for full height and width in Firefox:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Changing Pages… Please Wait</title>
<style type=”text/css”>
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:100%; border:none; }
</style>
<script type=”text/javascript”>
var frames = Array(’http://www.google.com/’, 15,
‘http://www.yahoo.com/’, 37,
‘http://www.ask.com/’, 12,
‘http://www.dogpile.com/’, 14);
var i = 0, len = frames.length;
function ChangeSrc()
{
if (i >= len) { i = 0; } // start over
document.getElementById(’frame’).src = frames[i++];
setTimeout(’ChangeSrc()’, (frames[i++]*1000));
}
window.onload = ChangeSrc;
</script>
</head>
<body>
<div>
<iframe src=”" name=”frame” id=”frame” width=”100%” height=”100%” border=”0″ scrolling=”no”></iframe>
</div>
</body>
</html>
