14

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?

Darko Martic
  • 179
  • 1
  • 2
  • 11

6 Answers6

22

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');
}
Vince Pike
  • 620
  • 6
  • 13
  • 3
    Sometimes `contentDocument` does not exist, so try `contentWindow` in stead of it. Example: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_contentdocument – Shayan Dec 06 '19 at 18:13
  • Yes, in Chrome 79, this code worked for me only when changing it to `iframe.contentWindow.document.addEventListener('mouseup', Handler);` – cazort Dec 18 '19 at 15:31
10

This will work:

 $('#myIFrame').load(function(){
     //then set up some access points
     var contents = $(this).contents(); // contents of the iframe
     $(contents).find("body").on('mouseup', function(event) { 
         alert('test'); 
     });
 });
Community
  • 1
  • 1
Muhammad Bilal
  • 139
  • 3
3

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

Joe Czucha
  • 4,123
  • 2
  • 20
  • 28
Andrii Verbytskyi
  • 7,155
  • 3
  • 47
  • 38
  • Thanks Your approach works perfectly, but I add to use 'contentDocument' instead of 'contentWindow'. iframe.contentDocument.body.addEventListener('click', () => console.log('click')); – user1298923 Mar 15 '22 at 16:12
  • 7
    Then how we can approach for cross domain origin. – Mohamed Ali May 01 '22 at 07:43
2

Try this working on chrome, just tested

As per my knowledge, Iframe must be from same domain.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> - jsFiddle demo</title>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>

    <script type='text/javascript'>
        $(window).load(function () {            
            var $frame = $("#myIFrame");
            $frame.contents().bind("mouseup", function (e) {
                alert('inside');
            });
        });
    </script>
</head>
<body>
    <iframe id="myIFrame" src="/WebForm4.aspx" style="position:absolute; width:500px; height:500px;left:0px; top:50px"></iframe>
</body>
</html>
Maddy
  • 907
  • 3
  • 10
  • 25
  • 1
    it wont work on jsfiddle, because it mark that script as CDATA. Try this on your local machine. – Maddy May 22 '15 at 14:12
1
$($("#iframeid").contents()[0], window).find('body').bind("mouseup", function(e) {
    alert("works");
});

Try this. Works in jsfiddle. Enjoy.

wast
  • 878
  • 9
  • 27
0

To give trigger event to your iframe there is an alternate way: Wrap ifrmae inside a div and give onClick event to the div. So that onClick of div you can give trigger event on click of iframe.

Roop Kadam
  • 1
  • 2
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 12 '22 at 05:46