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.
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:
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:
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 iframe
s from loading their content inititially.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.
如何使用 ajax 请求加载广告内容,并在 ajax 调用返回时将内容添加到 DOM,而不是使用 iframe?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.