/    Sign up×
Community /Pin to ProfileBookmark

how to force an iframe to reload?

Copy linkTweet thisAlerts:
May 03.2005

Hello

I have a page A which contains an iframe B which gets loaded with content as the page loads
Page A has a link. When the link is clicked, I invoke some JavaScript function which performs some tests, and then I would like to have my iframe reload some other URL

The problem is that I change the iframe’s src attribute to the new URL but nothing happens. The iframe isn’t reloading.

How can I force it to reload?
I heard that it was a problem in IE but that could be a mistake on my part
It is vital to note that if I clean my browser cache (on IE), then the code works fine once (the iframe gets reloaded). But once it is in the cache, successive attempts fail

Here is a sample of my code

[code]
<head>
function test() {
// perform some tests here
iframe = document.getElementById(‘RSIFrame’);
iframe.src = ‘two.html’;
// iframe.reload(true); <– even tried that
}
</head>
<body>
<a href=”javascript: void test();”>Run</a>
<iframe src=”one.html” id=”RSIFrame” name=”RSIFrame” width=”200″ height=”100″></iframe>
</body>
[/code]

Thanks in advance

to post a comment
JavaScript

22 Comments(s) ↴

Copy linkTweet thisAlerts:
@cootheadMay 03.2005 — Hi there jason,

how are your pants. ?

[i]coot[/i]
Copy linkTweet thisAlerts:
@scragarMay 03.2005 — [code=php]<head>
<script type="text/javascript"><!--

function test() {
// perform some tests here
iframe = document.getElementById('RSIFrame');
iframe.src = 'two.html';
// iframe.reload(true); <-- even tried that
}
//-->
</script>
</head>
<body>
<a href="two.html" target="RSIFrame" onclick="test();return true">Run</a>
<iframe src="one.html" id="RSIFrame" name="RSIFrame" width="200" height="100"></iframe>
</body>[/code]
Copy linkTweet thisAlerts:
@mad_zzzbJul 26.2006 — I had the same problem and simply did this on the page loaded on the iframe

<head>

<meta http-Equiv="Cache-Control" Content="no-cache">

<meta http-Equiv="Pragma" Content="no-cache">

<meta http-Equiv="Expires" Content="0">

</head>

This way the page is not cached and is always reloaded.
Copy linkTweet thisAlerts:
@LedmikOct 25.2007 — Sorry, to post to such an old thread, but this is the second item found when searching on Google. After more than an hour of searching under other subjects, I finally found the answer so here it is for future Google searchers:

[CODE]document.getElementById(FrameID).contentDocument.location.reload(true);[/CODE]

I would like to also thank Jagadish Chaterjee who did this iframe tutorial that contained the answer to my problem.

Mike

wdc at ledmik.com
Copy linkTweet thisAlerts:
@jasongrauthorOct 27.2007 — Thanks a lot.

It is always helpful to learn something new
Copy linkTweet thisAlerts:
@LedmikOct 29.2007 — Sorry, that one only worked in FireFox. I did finally find this one that I have tested and works in FireFox and IE6.

parent.frames[FrameID].window.location.reload();
Copy linkTweet thisAlerts:
@slaughtersOct 29.2007 — I always just reassigned the src
Copy linkTweet thisAlerts:
@LedmikOct 30.2007 — Reassigning the src will work in most instances, but it doesn't give you a true reload.
Copy linkTweet thisAlerts:
@slaughtersOct 30.2007 — Reassigning the src will work in most instances, but it doesn't give you a true reload.[/QUOTE]

A "true" reload ? How is that different from a "fake" reload ? ?

P.S. If the iFrame contains a form which accepts name/value pairs as arguments, then attach them to the URL in the src assignment in order to either preserve and/or reset the values in the form.
Copy linkTweet thisAlerts:
@bastiaaaanFeb 19.2008 — instead of using "document.getElementById(FrameID).contentDocument.location.reload(true);"

you can also use: document.getElementById(FrameID).src=document.getElementById(FrameID).src;
Copy linkTweet thisAlerts:
@mrhooFeb 19.2008 — Another way is to add a random tail to the iframe's src

var tail='?r+'+Math.round(Math.random*10000);

var url=iframe.src.split('?')[0];

iframe.src=url[0]+tail;
Copy linkTweet thisAlerts:
@erjatiJun 22.2009 — I know nothing about js and would love to get this to work with a button just above the iframe but what I've cut and pasted from there doesnt work at all in IE. I need to have several iframes holding different web pages and have the button refresh only the one it refers to. Can anyone help? I need a full code example that works as i don't know what I'm looking at. Thanks a million.
Copy linkTweet thisAlerts:
@i9steniJul 28.2009 — hi,

I used:

document.getElementById('iFrame').contentDocument.location.reload(true);

and that worked for me, both in firefox and ie.

Hovewer, i did have som trouble with getting it to work until i realised that in my iframe i need to set an id="iFrame". se below:

<iframe [B]id="iFrame"[/B] src ="http://www.mylovelyday.se/doksys/cover.php" width="100&#37;" height="300">

<p>Your browser does not support iframes.</p>

</iframe>

that worked for me!
Copy linkTweet thisAlerts:
@KorJul 29.2009 — 

[CODE]document.getElementById(FrameID).[B][COLOR="Red"]contentDocument[/COLOR][/B].location.reload(true);[/CODE]

[/QUOTE]
I used to think that [B]location[/B] is a property of the [B]window[/B] Global Object, not of the [B]document[/B] object. I would rather use:
<i>
</i>[CODE]document.getElementById(FrameID).[B][COLOR="Blue"]contentWindow[/COLOR][/B].location.reload(true);[/CODE]</CODE>

[/QUOTE]<br/>
Copy linkTweet thisAlerts:
@ehcraigSep 16.2010 — hi,

I used:

document.getElementById('iFrame').contentDocument.location.reload(true);

and that worked for me, both in firefox and ie.

Hovewer, i did have som trouble with getting it to work until i realised that in my iframe i need to set an id="iFrame". se below:

<iframe [B]id="iFrame"[/B] src ="http://www.mylovelyday.se/doksys/cover.php" width="100%" height="300">

<p>Your browser does not support iframes.</p>

</iframe>

that worked for me![/QUOTE]

I have seen this piece of code all over the net, but where does;

document.getElementById('iFrame').contentDocument.location.reload(true);

belong in the page (html) code?
Copy linkTweet thisAlerts:
@slaughtersSep 16.2010 — I have seen this piece of code all over the net, but where does;

document.getElementById('iFrame').contentDocument.location.reload(true);

belong in the page (html) code?[/QUOTE]
Where ever you want to place a button or link that refreshes the iFrame.

Example:
[CODE]<a href="#" onclick="document.getElementById('iFrame').contentDocument.location.reload(true); return false;">Click to Refresh iFrame</a>[/CODE]
Copy linkTweet thisAlerts:
@nbjadavOct 06.2010 — var ifDocument = window.document.getElementById('ifDocument');

ifDocument.src = '';

if iframe is in parent window:

var ifDocument = window.parent.document.getElementById('ifDocument');

ifDocument.src = '';
Copy linkTweet thisAlerts:
@Bryan_GAug 11.2011 — I had the same problem and simply did this on the page loaded on the iframe

<head>

<meta http-Equiv="Cache-Control" Content="no-cache">

<meta http-Equiv="Pragma" Content="no-cache">

<meta http-Equiv="Expires" Content="0">

</head>

This way the page is not cached and is always reloaded.[/QUOTE]
This one worked for me, thanks mad_zzzb!
Copy linkTweet thisAlerts:
@NiliosNov 16.2011 — Hi Everyone,

I have searched through this forum and online but my iFrame still doesn't reload.

I have an iframe going to another domain inside a div that is on a SharePoint site. I do not have Designer capability to add anything into the HEAD or BODY tag. The thing with this is that I only want a portion of site to be displayed in the iframe.

At first i tried this:

<div style="width: 278px; height: 405px; margin-left:28px; overflow: hidden;"><iframe id="iframe5" name="iframe5" src="http://www.url.com/" scrolling="no" style="margin-top: -160px; margin-right: -88px; margin-left:-13px; margin-bottom:0px; width: 285px; height: 565px; margin-right:200px"></iframe></div>

<script type="text/javascript">

document.getElementById('iFrame5').contentDocument.location.reload(true);

</script>

That doesn't work all the time because a different part of the site gets displayed in the iframe.

Then I tried Brian G's method below but not in the HEAD tag but near the top of the site and that did the same thing.

Is the issue that I am trying to display only a portion of the site in the iFrame which makes it not load properly or is the iFrame just not refreshing when the page is loaded? I am using IE8 only if that makes any difference on the javascript i used above.

Note that when I right-click the iFrame and Refresh it the proper contents in the iFrame is displayed so the location of the content of what I want displayed on the other domain has stayed intact.

Any help is greatly appreciated.
Copy linkTweet thisAlerts:
@RankxNov 16.2011 — This one worked for me, thanks mad_zzzb![/QUOTE]

Doesn't seem to work for everyone the same.
Copy linkTweet thisAlerts:
@NiliosNov 16.2011 — Thanks Rankx, which doi you think would be the best method for IE8 based on the code snippet I have?
Copy linkTweet thisAlerts:
@RankxNov 16.2011 — Thanks Rankx, which doi you think would be the best method for IE8 based on the code snippet I have?[/QUOTE]

To be quite honest, I am really not sure. I only learn the Javascript I would need to do a particular thing. But I have faced the problem a few times, where the code that works for others just doesn't work for me. But I am sure someone else might be able to guide you accordingly. Might take some time though.
×

Success!

Help @jasongr spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...