使用jQuery在DOM中移动iFrame

我的总体目标是使用TinyMCE创建一个我可以使用jQuery UI进行皮肤处理的编辑器（通过创建一个使用集成调用的自定义工具栏）。使用jQuery在DOM中移动iFrame

可以说我在页面上有一个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周围的表代码去掉吗？

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

来源

2010-06-12 Josh

在这里发生了一些奇怪的事情......我可以使用artlung的建议，但是iframe的内容会被清空。另外，CodeJousts建议正在替换表中的任何东西......似乎iframe报告自己为空？ – Josh 2010-06-12 20:50:37

我已经把代码在粘贴上使用... http://pastebin.com/8CQ5GBd6 它在第30行开始的点击函数中的代码。 – Josh 2010-06-12 20:53:56

无法得到这个工作正常，这样反而得到了一点CSS的摆脱TinyMCE的用户界面。

感谢所有的建议，但！

来源

2010-06-28 20:36:30 Josh

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

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

来源

2010-06-12 19:45:59 CodeJoust

看起来它应该可以工作，但表被替换为什么都没有... – Josh 2010-06-12 20:48:53

如何：

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

来源

2010-06-12 19:59:02 artlung

类似于我尝试的代码所做的一样...它移动的iFrame正常，但不是它内部的内容 - 萤火虫只显示空的头部和身体标记。 – Josh 2010-06-12 20:48:25

它可能有什么关系，当它被装载。您可能需要将内容重新加载到“iframe”中。 – artlung 2010-06-12 21:43:16

你必须保存在某个地方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);

的代码可以被优化了很多，但主要的想法是一样的。

来源

2013-06-24 21:23:56 Maxim

使用jQuery在DOM中移动iFrame

回答

相关问题