addEventListener to iFrame

Question

I'm tryin to add event listener to mouseup inside iframe object:

$("#myIFrame").contents().find("body").bind("mouseup", function() {
    //e.preventDefault(); //doesn't make difference
    alert('inside');
});

This doesn't work. Any ideas?

Answer 1

iframe.contentWindow

const iframe = document.getElementById('iframeId');
iframe.contentWindow.body.addEventListener('click',() => console.log('click));

Mind the cross-origin policy

Event bubbling will be allowed only if frames have the same origin. Unless you will get next error (Chrome):

Blocked a frame with origin "http://example.com" from accessing a cross-origin frame

Answer 2

If you just want a plain vanilla Javascript way, you can use the following:

var iframe = document.getElementById('myIFrame');
iframe.contentDocument.body.addEventListener('mouseup', Handler);

function Handler() {
    alert('works');
}