'Listen click text in dynamically created iframe

I want to add event when click on text in iframe. This iframe created after the document has loaded. After created, there is document object #document created in iframe element. In this code, the click on text in iframe could not be catched.

<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-holder').append(iframe);
        })
        $(document).on('click','#iframe-holder > iframe',function(){
            console.log('you have clicked text in iframe');
            //do something
        });
    </script>
</head>
<body>
    <div id="iframe-holder">
        
    </div>
</body>
javascripthtmliframeonclickonclicklistener


Solution 1:[1]

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.

Solution 2:[2]

You are adding a click listener on the iframe itself here:

    $(document).on('click','#iframe-holder > iframe',function(){
       console.log('you have clicked text in iframe');
       //do something
    });

Instead you should add a click event on the text in iframe, so you should do this:

    const iframe = document.querySelector('#iframe-holder > iframe');
    iframe.onload = function() {
        const iframeDocument = iframe.contentWindow.document;
        iframeDocument.addEventListener('click', function(e) {
            if (e.target.tagName.toLowerCase() == 'span') { // Element clicked inside iframe is a span element
                // Do your work here
            }
        }) 
    }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Premlatha
Solution 2

Related Questions