Можно ли вызвать событие для динамически загружаемого содержимого iframe в документе с помощью метода jquery: on - PullRequest
0 голосов
/ 05 июня 2018

Я бы хотел добавить события мыши и нажатия клавиш для фреймов.Следующий код работает для существующих iframes на странице, но не для динамически созданных фреймов в документе с помощью javascript.

$('iframe').contents().keypress(function(){
         console.log('iframe keypress event fired1');
      });

      $('iframe').contents().mousemove(function(){
        console.log('iframe mousemove event fired2');
     });

Я хотел сделать эту работу для динамически создаваемых фреймов после загрузки документа.Я скопировал весь код ниже.

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Iframe Events Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
</head>
<body>
<div>Existing Iframe</div>
<input id="btnFrame" type="button" value="Load Dynamic Iframe"/>
<iframe width="200px" height="100px"></iframe>
</body>
<script>

$(document).ready(function() {
    console.log('document ready event...');
    $('#btnFrame').click(function(){
        console.log('btn click event...');
        console.log($('iframe#dynamic').length);
        if ($('iframe#dynamic').length === 0) {     
            prepareFrame();
        }       
    }); 
});

$(window).on('load', function() {
       $('iframe').on("load", function () {
         // All the contents of the iframe are loaded
         $('iframe').contents().keypress(function(){
            console.log('iframe keypress event fired');
         });
       });
    });


function prepareFrame() {
    var ifrm = document.createElement("iframe");
    ifrm.setAttribute("id", 'dynamic');
    ifrm.style.width = "640px";
    ifrm.style.height = "480px";
    document.body.appendChild(ifrm);
}

</script>

</html>

1 Ответ

0 голосов
/ 05 июня 2018

Это потому, что ваши iframes недоступны при регистрации прослушивателя событий.Вы можете зарегистрировать прослушиватель событий после того, как просмотр завершен.

$(window).on('load', function() {
   $('iframe').on("load", function () {
     // All the contents of the iframe are loaded
     $('iframe').contents().keypress(function(){
        console.log('iframe keypress event fired');
     });
   });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...