在动态创建的 iframe 中收听点击文本

Question

我想在点击 iframe 中的文本时添加事件。此 iframe 在文档加载后创建。创建后，在 iframe 元素中创建了文档对象 #document。在这段代码中，无法捕捉到 iframe 中的文本点击。

<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>

Answer 1

您要在此处的 iframe 本身上添加点击侦听器：

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

相反，您应该在 iframe 中的文本上添加点击事件，因此您应该这样做：

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

Answer 2

我已经测试了@Teemu 和@Tanay 的答案。它在我添加 document.addEventListener('load',function(event){//sucessfully fired when added here}) 时起作用然后，我将 iframe.src 更改为源文档 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>

感谢您的帮助。

在动态创建的 iframe 中收听点击文本

Listen click text in dynamically created iframe

html

javascript

iframe

onclick

onclicklistener