470,594 Members | 1,512 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,594 developers. It's quick & easy.

Contents Reloaded on Inserting an IFRAME Into DOM


I'm trying to move an iframe from one position in the DOM to another. The moving itself is not a problem at all, but I experience a different behaviour between Firefox (1.5) and IE (6): As soon as I insert the iframe somewhere else, in Firefox the contents get reloaded, whereas in IE the iframe remains as it is. The latter one is the behaviour I'd require. Essentially I'd like to move the iframe and keep the state of it across the move operation. I narrowed my code down to the following minimal test:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <script type="text/javascript">
  4.             var currentContainer = "container1";
  5.             var otherContainer = "container2";
  7.             function swap()
  8.             {
  9.                 var cc = document.getElementById(currentContainer);
  10.                 var co = document.getElementById(otherContainer);
  11.                 var i = cc.getElementsByTagName("IFRAME")[0];
  12.                 co.appendChild(i);
  13.                 //cc.removeChild(i);
  14.                 var tmp = currentContainer;
  15.                 currentContainer = otherContainer;
  16.                 otherContainer = tmp;
  17.             }
  19.         </script>
  20.     </head>
  21.     <body>
  22.         <a href="javascript:void(0);" onclick="swap();">swap</a>
  23.         <div id="container1" style="width:200px; height:200px; background-color: red">
  24.             Container1
  25.             <iframe src="test1.html"></iframe>
  26.         </div>
  27.         <div id="container2" style="width:200px; height:200px; background-color: green">
  28.             Container2
  29.         </div>
  30.     </body>
  31. </html>
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <script type="text/javascript">
  4.             function loaded()
  5.             {
  6.                 alert("loaded");
  7.             }
  8.         </script>
  9.     </head>
  10.     <body onload="loaded();">
  11.     </body>
  12. </html>
On the first page load an alert box pops up. Nothing wrong with that. But on clicking the "swap" link in Firefox the alert keeps popping up whereas in IE it doesn't.

Any idea how I can convince FF to behave like IE (just in this case of course ;-))?

Best regards,
Feb 15 '07 #1
4 2061
1,208 Expert 1GB
best way i can think of is to have 1 div and move the entire div
or have you tried setting container 2's innerHTML to container1's innerHTML
Feb 15 '07 #2
Thanks very much for your suggestions. Unfortunately neither of them work. I also tried to use an <object type="text/html"> instead of an iframe, with the difference that now IE also behaves like FF. Any other ideas?
Feb 16 '07 #3
1,208 Expert 1GB
i took your code and tried things left and right in firefox i couldn't come up with a good conclusion on how you would make a work around for this.
Feb 16 '07 #4
No worries. Thanks anyway for your efforts. I guess I have to accept the behaviour as it is.
Feb 19 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by John Chen | last post: by
1 post views Thread by Steve Richter | last post: by
2 posts views Thread by bs9999 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.