How to add an event to newly added iframe

Question

After a helpful comment on my previous question: Copy & Paste plain text within HTML

I'm now struggling to apply this approach to a rich text editor (RTE). My application runs in a CMS environment, CQ5.6.1 in this case, but this shouldn't be relevant to the problem. Text blocks are edited within this system by double clicking on it, which opens a so called dialog where within the first tab the RTE is loaded in an iframe. So the iframe will be added to the DOM after a user interaction. How can I attach the paste event listener to this iframe?

I tried this at first.

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

I can see that this approach won't work as the iframe isn't there when I call this method. So I tried to attach the load event on any added iframe. At least I though on would take care of this...

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

But event the load event never gets fired. What am I doing wrong or is there a more elegant way?

EDIT: I also tried a third approach but still the load event never gets fired:

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

score 0 · Answer 1 · edited May 23 '17 at 12:26

0

Are the contents of your iframe hosted on another domain? If that's the case, the reason for you not being able to add event handlers is the same origin policy. Trying to circumvent it is almost pointless - I'd rather think about a different approach to your problem.

There are several answers on SO regarding this topic. Like this one

edited May 23 '17 at 12:26

Community

1
1

answered Oct 21 '14 at 11:57

panepeter

3,224
1
29
41

All content is from the same domain. I know that it won't work cross domain. But thanks for the links, I already read a few posts, but non could really answer my question yet. – Thomas Oct 21 '14 at 12:04
Too late to edit: In most questions I found on SO the iframe is already in the DOM or is added by script itself so you already have a reference to it. My problem is, the iframe will be added from another script of the CMS. So I first need to get the event that an iframe is added and then add an event listener to its document. – Thomas Oct 21 '14 at 12:11
Super un-cool, but you might check for newly created iframes with a timer, as suggested [here](http://stackoverflow.com/questions/7434685/event-when-element-added-to-page). Something like `if($('#myuniqueselector iframe').length>0){ - add event handler here - }` should go inside the function then – panepeter Oct 21 '14 at 12:21

score 0 · Answer 2 · answered Oct 21 '14 at 12:59

I found a solution which is specific to my CMS (CQ 5.6.1), so I'll post it as an answer to my own question if someone has a similar issue in the future. I also add cq and aem tags to the question.

You can add a loadcontent listener to the richtext component where you have access to the iframe from the field:

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

And the paste method:

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

Nonetheless if someone finds a generic way to achieve this, please add your answer.

How to add an event to newly added iframe

2 Answers2