Refresh Page Script targeting iframe

**Beverleyh** · 07-09-2008, 12:59 PM

1) Script Title: Page Refresh Script (originally by Brett Taylor)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex6/refresh.htm

3) Describe problem: I would like to have this script refresh the contents of an iframe but I dont know how to change it without producing errors.

I tried changing the window.location.reload() part to frames['iframename'].reload(), based on some futile googling, but that doesnt work.

As you can tell, I'm no javascript expert so if someone could point me in the right direction, that would be great.

Thanks

Beverley

ps - I need to use the iframe in this instance as the src is an Excel (saved as a web page) "staff cover sheet" that our admin assistant updates several times throughout the day and it needs to be as simple as possible. I dont want to have to ask her to paste the original refresh script into it as she's only a basic administrator with now web/HTML training.

**jscheuer1** · 07-09-2008, 04:29 PM

There are security restrictions against doing this if the page in the iframe isn't from the same domain as the top page. No way around that, unless you always know what page will be in the iframe, but then it wouldn't be a refresh, rather a replacement by the page itself, and would require different code. I won't get into that further now, unless it is an issue.

This is the syntax for refreshing a page from the same domain in an iframe:

Code:

window.frames['someframe'].location.reload();

Now, many people (I'm not saying you, but be careful here) think the id of the iframe is its name. But it isn't, they can be the same, but the name attribute must be specified in the iframe tag, ex:

Code:

<iframe name="someframe" . . .

Also, if you are doing this to refresh a page that is cached, the cached copy may get reloaded, resulting in no real change. There are ways to deal with that, if it is an issue.

**Beverleyh** · 07-10-2008, 12:41 PM

Hi,

I think I made the correct changes, however it doesn't work.
Both src pages are on our server so thats not an issue - here's the code that I now have.

Code:

<body>

<script language="JavaScript">

//Refresh page script- By Brett Taylor (glutnix@yahoo.com.au)
//Modified by Dynamic Drive for NS4, NS6+
//Visit http://www.dynamicdrive.com for this script

//configure refresh interval (in seconds)
var countDownInterval=60;
//configure width of displayed text, in px (applicable only in NS4)
var c_reloadwidth=200

</script>


<ilayer id="c_reload" width=&{c_reloadwidth}; ><layer id="c_reload2" width=&{c_reloadwidth}; left=0 top=0></layer></ilayer>

<script>

var countDownTime=countDownInterval+1;
function countDown(){
countDownTime--;
if (countDownTime <=0){
countDownTime=countDownInterval;
clearTimeout(counter)
window.frames['frame1'].location.reload();
return
}
if (document.all) //if IE 4+
document.all.countDownText.innerText = countDownTime+" ";
else if (document.getElementById) //else if NS6+
document.getElementById("countDownText").innerHTML=countDownTime+" "
else if (document.layers){ //CHANGE TEXT BELOW TO YOUR OWN
document.c_reload.document.c_reload2.document.write('Next <a href="javascript:window.frames['frame1'].location.reload()">refresh</a> in <b id="countDownText">'+countDownTime+' </b> seconds')
document.c_reload.document.c_reload2.document.close()
}
counter=setTimeout("countDown()", 1000);
}

function startit(){
if (document.all||document.getElementById) //CHANGE TEXT BELOW TO YOUR OWN
document.write('Next <a href="javascript:window.frames['frame1'].location.reload()">refresh</a> in <b id="countDownText">'+countDownTime+' </b> seconds')
countDown()
}

if (document.all||document.getElementById)
startit()
else
window.onload=startit
</script>


<iframe id="frame1" name="frame1" src="staff_cover.htm"></iframe><br>

<iframe id="frame2" name="frame2" src="deadlines.htm"></iframe>

</body>

I changed 3 instances in total - is there anything else I've missed?

Thanks

Beverley

**jscheuer1** · 07-10-2008, 03:06 PM

Since NN 4 and IE 4 both lack support for frame and iframe, and are very rarely used any longer, we can drop all support for those browsers in the code. In fact this will make the code degrade gracefully in those browsers, while leaving it as it was would cause errors in them. However, the script as posted in your message would have worked in modern browsers except for two syntax errors. Here is an updated version that fixes those, drops the unnecessary code and brings it into compliance with standards and adds a few good practices:

Code:

<script type="text/javascript">

//Refresh page script- By Brett Taylor (glutnix@yahoo.com.au)
//Modified by Dynamic Drive for NS4, NS6+
//Visit http://www.dynamicdrive.com for this script

//configure refresh interval (in seconds)
var countDownInterval = 60;

//////////////////// Stop Editing ////////////////////

function countDown(){
if (countDown.countDownTime <= 0){
countDown.countDownTime = countDownInterval;
clearTimeout(countDown.counter);
window.frames['frame1'].location.reload();
countDown();
return;
}
var c = countDown.countDownTime.toString(10);
while (c.length < countDown.padref)
c = '0' + c;
document.getElementById("countDownText").firstChild.nodeValue = c;
--countDown.countDownTime;
countDown.counter=setTimeout("countDown()", 1000);
}

countDown.countDownTime = countDownInterval;

function startit(){
countDown.padref = countDownInterval.toString(10).length;
//CHANGE TEXT BELOW TO YOUR OWN
document.write('Next <a href="javascript:refreshFrame();" onclick="window.frames[\'frame1\']' +
'.location.reload();return false;">refresh<\/a> in <b id="countDownText">' + countDown.countDownTime + ' <\/b> seconds');
countDown();
}

if (document.getElementById)
startit();

</script>

Notes: The script, although all one script code block, still goes in the body where you want the counter to appear. However, since the generated markup is inline and so are iframes, you might want to enclose the script in a div element, or simply follow it with a <br> tag.

The script now pads it's countdown numeral with preceding 0's to the same number of places as the countDownInterval variable. If you want to avoid that, change the highlighted code in the above to the number 1.

**Beverleyh** · 07-11-2008, 11:37 AM

That's excellent!

Thanks you so much for your help - it works perfectly.

Beverley

**jscheuer1** · 07-12-2008, 07:01 AM

You're welcome. However, I've since noticed that if one hits the 'manual' refresh link, it doesn't reset the counter, which I believe it should. Also, requiring that the script be edited in two places to change the iframe name isn't ideal, and neither is the way I left it on the optional padding. Here is a better version:

Code:

<script type="text/javascript">

/* Refresh iframe script ©2008 John Davenport Scheuer
   This notice must remain for legal use
   originally put forth in dynamicdrive.com/forums/
   username: jscheuer1 */

//configure refresh interval (in seconds)
countDown.countDownInterval = 20;
//configure iframe name
countDown.iframeName = 'frame1';
//pad countdown with preceding zeros as it becomes less characters? (true/false)
countDown.padref = true;

//////////////////// Stop Editing ////////////////////

function countDown(man){
if (countDown.countDownTime <= 0 || man){
countDown.countDownTime = countDown.countDownInterval;
clearTimeout(countDown.counter);
window.frames[countDown.iframeName].location.reload();
countDown();
return;
}
var c = countDown.countDownTime.toString(10);
while (c.length < countDown.padref)
c = '0' + c;
document.getElementById("countDownText").firstChild.nodeValue = c;
--countDown.countDownTime;
countDown.counter=setTimeout("countDown()", 1000);
}

countDown.countDownTime = countDown.countDownInterval;

function startit(){
countDown.padref = countDown.padref? countDown.countDownInterval.toString(10).length : 1;
//CHANGE TEXT BELOW TO YOUR OWN
document.write('Next <a href="javascript:refreshFrame();" onclick="countDown(1);return false;">' +
'refresh<\/a> in <b id="countDownText">' + countDown.countDownTime + ' <\/b> seconds');
countDown();
}

if (document.getElementById)
startit();

</script>

Thread: Refresh Page Script targeting iframe

Thread Tools

Search Thread

Refresh Page Script targeting iframe

Bookmarks

Bookmarks

Posting Permissions