使用 jQuery 在 DOM 中移动 iFrame答案

【问题标题】：Move iFrame in the DOM using jQuery使用 jQuery 在 DOM 中移动 iFrame
【发布时间】：2010-06-12 19:38:36
【问题描述】：

我的总体目标是创建一个编辑器，我可以使用 TinyMCE 使用 jQuery UI（通过创建使用集成调用的自定义工具栏）对它进行皮肤。

假设我在页面上有一个 TinyMCE 编辑器。实际的编辑器是一个 iFrame，包含在许多可怕的表格代码中，这也是当前（要废弃的）工具栏所在的位置。我只想要 div 内的 iframe - 理想情况下摆脱表格代码。

所以...我要转型：

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

进入

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

到目前为止，我已经尝试过使用：

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

克隆 iframe，但其中没有内容。

有没有办法让它工作？

如果没有，我可以以某种方式从 iFrame 周围剥离表格代码吗？

如果我不能这样做，我认为我将不得不保留表格代码。

【问题讨论】：

这里发生了一些奇怪的事情......我可以使用 artlung 的建议，但 iframe 内容随后被清空。此外，CodeJousts 的建议是用任何内容替换表格......似乎 iframe 报告自己为空？
我已经将我使用的代码放在了 pastebin 上...pastebin.com/8CQ5GBd6 它是从第 30 行开始的 click 函数中的代码。

标签： jquery tinymce

【解决方案1】：

无法使其正常工作，因此使用一些 CSS 摆脱了 TinyMCE UI。

感谢所有建议！

【讨论】：

【解决方案2】：

怎么样：

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

【讨论】：

有点像我尝试的代码正在做的......它可以移动 iFrame，但不是它里面的内容 - 萤火虫只显示空的头部和身体标签。
里面的内容和加载时间可能很重要。您可能需要将内容重新加载到您的iframe。

【解决方案3】：

你必须将 iframe 的 html 节点保存在某处（例如 iframe 本身），然后在 iframe 移动后恢复该节点：

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);

代码可能会优化很多，但主要思想保持不变。

【讨论】：

【解决方案4】：

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

试试...它用内部 iframe 替换表格。

【讨论】：