Adding Click Event Handler to Iframe

Adding click event handler to iframe

You can use closures to pass parameters:

iframe.document.addEventListener('click', function(event) {clic(this.id);}, false);

However, I recommend that you use a better approach to access your frame (I can only assume that you are using the DOM0 way of accessing frame windows by their name - something that is only kept around for backwards compatibility):

document.getElementById("myFrame").contentDocument.addEventListener(...);

addEventListener to iFrame

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'); 
     });
 });

Add click event to iframe

You could attach the click to the iframe content:

$('iframe').load(function(){
  $(this).contents().find("body").on('click', function(event) { alert('test'); });
});

Note: this will only work if both pages are in the same domain.

Live demo: http://jsfiddle.net/4HQc4/

How to add click event to the dynamic element of an iframe?

Explanation:- Since you are trying to add a event on dynamically created element inside an iframe, so you have to bind it through parent reference.

That means based on parent element try to find-out the dynamically added element and then add event on it.(as jQuery din't recognise dynamically added element directly)

So do it like below:-

$("#composer_frame").contents().find('#myAnch').on("click", function (e) {
    e.preventDefault();
    alert('clicked');
});

Working snippet:-https://jsfiddle.net/sycf9nz6/

This is called event-delegation

iFrame: using jQuery to add click event to button

Try this $iframe.contents()[0].getElementById("dog").addEventListener("click", function() { getDog() });

But this only works in iframes hosted in the same domain.

Apply onClick to Iframe

If the frame contains page from the same domain (does not violate same-origin policy), you can interact directly with its document:

<script type="text/javascript">
window.onload = function() {
    var oFrame = document.getElementById("myframe");
    oFrame.contentWindow.document.onclick = function() {
        alert("frame contents clicked");
    };
};
</script>

If it contains external page then you're out of luck - no way to do what you want for obvious security reasons. Although all the contents is visually parts of the same page, frames coming from different domains must stay separate in terms of scripting. Otherwise any page could e.g. create a hidden iframe loading your webmail and steal your session cookie from it. All the data is accessible to the user, but it should not be accessible to the page author.

Listen click text in dynamically created iframe

I have tested both @Teemu and @Tanay answer . It works when I added in document.addEventListener('load',function(event){//sucessfully fired when added here}) Then, I have change iframe.src to source document, page1.html.

<html>
<head>
    <script src="../ext/plugins/jquery/dist/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            //add iframe
            var iframe = document.createElement('iframe');
            var html = '<body>Foo</body>';
            //iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
            iframe.src = 'page1.html';
            $('#iframe-holder').append(iframe);
        })

document.addEventListener(
'load',
function(event){
  //1:
  $($('#iframe-holder > iframe')[0].contentDocument).on('click', function (e) {
  console.log('ln34');
    });
  //2:    
  const iframe = document.querySelector('#iframe-holder > iframe');
    iframe.onload = function() {
        const iframeDocument = iframe.contentWindow.document;
        iframeDocument.addEventListener('click', function(e) {
            console.log('ln43');
        })
    }
},
true // Capture event
);

    </script>
</head>
<body>
    <div id="iframe-holder">
        
    </div>
</body>

Thank you for help.

Adding Click Event Handler to Iframe