How to prevent an iframe from reloading when moving it in the DOM

Question

I have an iframe loaded with some content. I would like to move it inside the DOM without causing a refresh (I like the content inside it, I want to keep it).

I'm doing some basic node.appendChild(iframe) to do the job.

Is that possible?

Thanks in advance for your help.

score 19 · Accepted Answer · answered Sep 15 '11 at 16:33

19

If you're trying to move it visually, you can try modifying the CSS to use absolute positioning or some other adjustments.

However, if you're trying to actually pull it out of the DOM and insert it somewhere else, you won't be able to avoid a reload.

answered Sep 15 '11 at 16:33

John Fisher

22,355
2
39
64

No I'm not wanting to move it visually. So what I was afraid of is real. Too bad. :'( – Savageman Sep 15 '11 at 16:35
1

Not cross-browser tested yet; but it looks like you can rearrange nodes, including an iframe, within a single parent node without triggering a refresh using `insertBefore()`. e.g., `iframe.parentNode.insertBefore(iframe, iframe.parentNode.firstChild);` – svidgen Aug 02 '13 at 22:31

Drazisil · Answer 2 · 2011-09-15T16:40:33.777

2

I don't think so, as the browser is going to re-render/reload the iframe when it's put back in the DOM.

http://polisick.com/moveNode.php better explains it.

To move a node you call removeNode to take it out of the tree and into memory, then appendNode to 'paste' it back where you want it.

edited Sep 15 '11 at 16:40

answered Sep 15 '11 at 16:31

Drazisil

3,070
4
33
53

I don't want to remove it and put it back. I just wish to move it. – Savageman Sep 15 '11 at 16:34
That is how it gets moved. Same as the clipboard. Cut/Paste. – Drazisil Sep 15 '11 at 16:35
Ok. Doesn't look optimal but I have no idea how it works so... Thanks. – Savageman Sep 15 '11 at 16:37

score -2 · Answer 3 · edited Jul 09 '14 at 20:56

I had a similar problem with an iFrame in a jQueryUI dialog box. jQuery moves the div (containing my iFrame) out of the DOM and because I still wanted postbacks (duh), I had to move it back. After reading this and several other posts, I came up with a solution.

The simple idea that I noticed is that the iFrame reloads when it is moved. So, I added the iFrame into the dialog container (div) after moving the div back into the DOM. This works because jQuery doesn't care about what's in the container. Here is some sample code:

Dialog open/close functions:

open:

function () {
    $(this).parent().appendTo("form").css("z-index", "9000"); //Move the div first
    $(this).append('<iframe id="iFrame" allowtransparency="true" frameborder="0" width="100%" height="100%" src="somePage.aspx"></iframe>');}, //then add the iframe
}

close:

function() {
    $(this).empty(); //clear the iframe out because it is added on open, 
    //if you don't clear it out, you will get multiple posts
    $(this).parent().appendTo("divHidden"); //move the dialog div back (good house-keeping)
}

html:

<div id="divHidden" style="display: none">
    <div id="dialog" style="display: none">
    </div>
</div>

score -5 · Answer 4 · answered Nov 05 '13 at 08:11

-5

you need to save the 'Html' node under the iframe and after you moved the iframe, add it back

answered Nov 05 '13 at 08:11

dekely

1
3

How to prevent an iframe from reloading when moving it in the DOM

4 Answers4

Linked