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

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.

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.

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>