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

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.

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>

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