How to reload and/or refresh an iframe...

[Luys]

Hi all!

I would like (need) to know wich formula is the correct one to current standards using jquery or javascript to "refresh or update from the cache" an iframe with a link embedded in the iframe itself (and if possible, also how to reload from the web server).

Thanks in advance for your replies.

Luys

P.S.: I suppose some people might be also interested in how making such requests from the parent page, that is, a complete solution with all the four options.

[jscheuer1]

To reload from cache, no javascript is required, just an ordinary link pointing to the page. So, say the page in the iframe is called iframe.htm, a link like so on that page will refresh it from cache (assuming the browser has cached it, most will have, assuming it has no headers that require it to reload from the server, if it does, they must be removed for this or any method to work to reload from cache):

<a href="iframe.htm">Refresh From Cache</a>

From the parent page, you give the iframe a name attribute:

<iframe name="myframe" src="iframe.htm"  . . .   . . .></iframe>

and the link looks like so (same conditions as above):

<a href="iframe.htm" target="myframe">Refresh Iframe From Cache</a>

To force a reload from the server, you either do the same thing and have headers on the iframe.htm page that force it to load from the server, or if you want to leave those off so you have a choice as to whether or not to load from the server or cache, you can use javascript to create a link. Place this in the page in the iframe where you want the link to appear:

<script type="text/javascript">
document.write('<a href="iframe.htm?bust=' + new Date().getTime() + '">Refresh From Server</a>');
</script>

Same thing for the parent page, just add the target:

<script type="text/javascript">
document.write('<a href="iframe.htm?bust=' + new Date().getTime() + '" target="myframe">Refresh Iframe From Server</a>');
</script>

These are pretty simplistic examples. They work, but there's not much flexibility. You have to already know what page is in the iframe. From the page in the iframe, that's easy - it's that page. From the parent page, unless there are no other pages that could be in the iframe, that's harder.

But since you seemed primarily concerned with the page in the iframe, I won't go into the details of getting the page in the iframe from the parent to know which page to refresh. Also, with parent/child pages on different domains, no such communication is allowed.

I should add that using more sophisticated methods for something like this would require extensive cross browser testing, as the iframe is still non-standard in its implementation across browsers.

[Luys]

Once more, thank you so much, John!

A truly encyclopedic answer to my questions. It remains for future reference for anyone working with iframes and that is in trouble. "Moltes gràcies".
By the way, if I'm not in mistake for a correct behaviour in your first example the target of the link must be set to self: target="_self". This is my two cents ... ;-)

Right now I have an issue with an object embedded in a page with jquery tabs with iframes: the second tab is "hidden" at first and when the web document is loaded, IE do not draw this object on the iframe file. I have to update manually the frame to works. I'm looking for a solution that refresh o call to this iframe when one select or click this second tab. A simple way to solve a complex problem.

Thank you.

Luys

[jscheuer1]

Unless a base target has been set for the page, the default target for any link is _self.

But yes. The target should be _self. If there's a base tag or javascript on the page that sets a different target, then target="_self" must be included in the link. Otherwise, it may be omitted.

Was there another question in there? Or has this solved it for you?

[Luys]

All is OK.
I have to do my homework, if I can not get off the hook, I will ask for HELP!!!

Thank you, John.

Luys