在 iFrame 中使用可选择的 jQuery答案

【问题标题】：Using jQuery selectable within an iFrame在 iFrame 中使用可选择的 jQuery
【发布时间】：2013-01-06 13:35:26
【问题描述】：

我正在通过拖放界面使用 jQuery 开发 HTML 生成器。当前，用户将“块”元素拖到覆盖 iFrame 的不可见 div 上（因此它似乎正在拖放到 iframe 上）。当元素被拖放到这个不可见的 div 上时，相应的 HTML 将附加到 iFrame 主体中。

接下来，我想让用户能够在 iFrame 中选择一个元素，并更改所选元素的属性。

我已将 CSS 导入和 jQuery/jQueryUI 脚本附加到 iFrame 头部。

我面临的问题是，当单击附加的 iFrame 元素时，jQuery 选择套索仅在鼠标离开 iFrame 时出现，并且它出现在 iframe 之外。

我使用 iFrame 的原因是，当为用户“生成”代码时，我可以将 iFrame 正文内容附加到对话框中。

以前有人遇到过 iFrame 和 jQuery 的问题吗？是否有任何文档/javaScript 库可以帮助我完成此过程？

谢谢！

罗里

【问题讨论】：

标签： jquery-ui iframe

【解决方案1】：

围绕这个问题的“修复”很复杂，但适用于我的情况。

我在 iframe 中的每个添加元素上都创建了一个点击事件，如下所示：

$('iframe').contents().find('.elem'+blockVal).on('click', function(){
    $('iframe').contents().find('.selected').removeClass('selected');
    $(this).addClass('selected');
//alert('you have selected the block with class element'+ blockVal);
});

blockVal 是从将 html 附加到 iframe 的函数传入的变量。上面的函数只是为附加到 iframe 的每个元素添加了一个点击侦听器。当任何元素被点击时，它们会被赋予一个'selected'类，而任何其他已经拥有该类的元素都会丢失它。

如果这没有任何意义，我很抱歉。

我对任何做类似事情的人的建议：不要使用 iframe。

【讨论】：