如何将事件添加到新添加的 iframe

Posted 2023-05-09

【中文标题】如何将事件添加到新添加的 iframe

【英文标题】：How to add an event to newly added iframe

【发布时间】：2014-12-16 08:38:24

【问题描述】：

在对我之前的问题发表有用的评论后： Copy & Paste plain text within html

我现在正在努力将这种方法应用于富文本编辑器 (RTE)。我的应用程序在 CMS 环境中运行，在这种情况下为 CQ5.6.1，但这应该与问题无关。通过双击文本块在​​该系统中编辑文本块，这将打开一个所谓的对话框，其中在第一个选项卡中将 RTE 加载到 iframe 中。因此 iframe 将在用户交互后添加到 DOM 中。如何将粘贴事件侦听器附加到此 iframe？

我一开始就试过了。

jQuery(document, jQuery('iframe').contents()).on('paste', paste);

我可以看到这种方法不起作用，因为当我调用此方法时 iframe 不存在。所以我尝试在任何添加的 iframe 上附加加载事件。至少我虽然 on 会处理这个...

jQuery(document).on('paste', paste);
jQuery('iframe').on('load', function() 
    jQuery(this).contents().on('paste', paste);
);

但是load 事件永远不会被触发。我做错了什么还是有更优雅的方法？

编辑：我也尝试了第三种方法，但加载事件仍然没有被触发：

jQuery(document).on('load', 'iframe', function() 
    jQuery(this).contents().on('paste', paste);
);

【参考方案1】：

您的 iframe 的内容是否托管在另一个域上？如果是这种情况，您无法添加事件处理程序的原因是same origin policy。试图规避它几乎毫无意义——我宁愿考虑用不同的方法来解决你的问题。

关于这个话题有几个answers on SO。 Like this one

【讨论】：

所有内容都来自同一个域。我知道它不会跨域工作。但是感谢您的链接，我已经阅读了一些帖子，但还不能真正回答我的问题。

编辑太晚了：在我在 SO 上发现的大多数问题中，iframe 已经在 DOM 中，或者由脚本本身添加，因此您已经有了对它的引用。我的问题是，iframe 将从 CMS 的另一个脚本中添加。所以我首先需要获取添加 iframe 的事件，然后在其文档中添加事件监听器。

超级不酷，但您可以按照here 的建议使用计时器检查新创建的 iframe。然后像if($('#myuniqueselector iframe').length>0) - add event handler here - 这样的东西应该进入函数内部

【参考方案2】：

我找到了一个特定于我的 CMS (CQ 5.6.1) 的解决方案，因此如果将来有人遇到类似问题，我会将其发布为我自己问题的答案。我还在问题中添加了 cq 和 aem 标签。

您可以将 loadcontent 侦听器添加到您可以从字段访问 iframe 的富文本组件：

loadcontent: function(field)
    jQuery(field.iframe).contents().on('paste', paste);

以及粘贴方法：

var paste = function(e) 
    var pastedText = jQuery('ul.placeholders li.selected').text();
    if (pastedText != '') 
        e.preventDefault();
        e.target.innerHTML = pastedText;
    

但是，如果有人找到实现此目的的通用方法，请添加您的答案。