By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,747 Members | 1,258 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,747 IT Pros & Developers. It's quick & easy.

Contents Reloaded on Inserting an IFRAME Into DOM

P: 3
Hi,

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:

test.html:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <script type="text/javascript">
  4.             var currentContainer = "container1";
  5.             var otherContainer = "container2";
  6.  
  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.             }
  18.  
  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>
  32.  
test1.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>
  13.  
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,
Volker
Feb 15 '07 #1
Share this Question
Share on Google+
4 Replies

iam_clint
Expert 100+
P: 1,208
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

P: 3
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

iam_clint
Expert 100+
P: 1,208
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

P: 3
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.