javascript - How can I stop an iframe reloading when I change its position in the DOM? - Stack Overflow

admin管理员组

文章数量:1192919

Is there any way to stop an iframe re-loading its contents when I change its position within the DOM? Simple example:

<script type="text/javascript">
function moveiframe() {
    var dest = document.getElementById('newparent');
    dest.appendChild(document.getElementById('googleframe'));
}
</script>
<iframe src="; id="googleframe"></iframe>
<input type="button" onclick="moveiframe()" value="Move" />

clicking the "Move" button changes the parent of the iframe, and reloads its contents (in Firefox and Chrome, but not IE).

Any suggestions would be much appreciated!

[Updated with background info]

I'm loading the site's adverts in placeholder divs at the bottom of the page (to prevent advert loading from holding up the page load) - and then shifting the divs they've been written in to their correct container once loaded. It all works great... unless the ad that gets served uses an iframe (like google adsense) in which case the ad gets loaded twice and the serving is messed up.

Is there any way to stop an iframe re-loading its contents when I change its position within the DOM? Simple example:

<script type="text/javascript">
function moveiframe() {
    var dest = document.getElementById('newparent');
    dest.appendChild(document.getElementById('googleframe'));
}
</script>
<iframe src="http://www.google.com" id="googleframe"></iframe>
<input type="button" onclick="moveiframe()" value="Move" />

clicking the "Move" button changes the parent of the iframe, and reloads its contents (in Firefox and Chrome, but not IE).

Any suggestions would be much appreciated!

[Updated with background info]

I'm loading the site's adverts in placeholder divs at the bottom of the page (to prevent advert loading from holding up the page load) - and then shifting the divs they've been written in to their correct container once loaded. It all works great... unless the ad that gets served uses an iframe (like google adsense) in which case the ad gets loaded twice and the serving is messed up.

• javascript
• firefox
• google-chrome
• iframe

Share Improve this question Follow edited Mar 25, 2021 at 20:56 mike65535 50922 gold badges1111 silver badges2525 bronze badges asked Feb 9, 2010 at 22:47 James CrowleyJames Crowley 4,08155 gold badges3838 silver badges6666 bronze badges 2

• the iframe gets reloaded cause you are placing it in the dom again (dest.appendChild(IFRAME))..consider a javascript library that will allow you to move it. – Andreas Commented Feb 9, 2010 at 23:04
• 2 andreas - do you know of any javascript libraries that will allow you to move it? would be interested to look in the source and see how they do it... – James Crowley Commented Feb 9, 2010 at 23:06

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 11

Considering the simplicity of your test case, it looks like the only methods you have available to put an element inside another will always force the contents to reload.

[Edit] After seeing what you're trying to do, there are a couple things you can try:

1. All ads could be served in IFRAMEs (on your own site) which will not hold up loading of the page and can be placed in the right place right away.
2. As mentioned above IFRAMEs won't hold up loading of the page so you could put the ads in place right away if they are IFRAMEs and load them at the bottom if they are something else. Of course, this won't work if the slow part is before you know if you are going to get an IFRAME or not.
3. You could keep the content in it's placeholder DIV but when it's done loading just reposition (with CSS absolute positioning) over the right place in the page. Not the most elegant solution, but should work fine.

I'm regretting my original answer, as it seems to be causing other headaches. Here's a few other potential solutions that you may not have tried:

• Place the ad scripts inside of divs with their display style set to none. Then, move them to their final desintation and change them to display: block after the page has loaded. Perhaps this would prevent the iframes from loading their content inititially.
• Try the same thing, only with visibility set to hidden, then changed to visible.

A quick guess would be to unset the value of the src attribute of the iframe element or set it to "about:blank".

It is up to you to restore the previous value (or any value) to the src attribute of the iframe (using JavaScript).

Regards,

If the ads are a fixed size, you could place them in absolutely-positioned divs instead. Then, once the page loads, you could move those container divs to their designated spots. There are a lot of Javascript samples out there for calculating an absolute position from a relative position. Of course, you would have to reserve space visually in the destination divs so the ads wouldn't cover the content.

What about using an ajax request to load the ad's contents, and adding the contents to the DOM when the ajax call returns, instead of using an iframe?

本文标签： javascriptHow can I stop an iframe reloading when I change its position in the DOMStack Overflow