Move iFrame in the DOM using jQuery

问题

My overall aim is to create an editor which I can skin using jQuery UI (by creating a custom toolbar which uses integration calls), using TinyMCE.

Lets say I have a TinyMCE editor on a page. The actual editor is an iFrame contained inside a lot of horrible table code, which is also where the current (to be scrapped) toolbar is. I want just the iframe inside a div - ideally get rid of the table code.

So...I want to transform:

<table>
    <tr>
        <td><iframe id="xyz"></iframe></td>
    </tr>
</table>

into

<div id="test">
    <iframe id="xyz"></iframe>
</div>

So far, I've tried using:

$('#xyz').clone(true).appendTo('#test');

Which clones the iframe, but no content inside it.

Is there a way to make this work?

If not, can I somehow strip the table code from around the iFrame away?

If I cant do that, I'll think I'll have to keep the table code.

回答1:

Couldn't get this working properly, so instead got rid of the TinyMCE UI with a bit of CSS.

Thanks for all the suggestions though!

回答2:

How about:

// http://api.jquery.com/replaceWith/
$('table:has(#xyz)').replaceWith($('#xyz'));
// http://api.jquery.com/wrap/
$('#xyz').wrap('<div id="test" />');

回答3:

you have to save iframe's html node somewhere (e.g. iframe itself), then restore this node after iframe moving:

iframe.htmlNode = iframe.contentDocument.getElementsByTagName('html')[0];
// moving iframe here ......

// restoring html node
var html = iframe.contentDocument.documentElement;
html.parentNode.removeChild(html);
iframe.contentDocument.appendChild(iframe.htmlNode);

The code may be optimized a lot, but the main idea remains the same.

回答4:

$('table').replaceWith($('iframe:first'));

Try that... It replaces the table with the inner iframe.

来源：https://stackoverflow.com/questions/3029871/move-iframe-in-the-dom-using-jquery

标签

jquery

tinymce