добавить событие `load` для КАЖДОГО iFrame на странице - PullRequest
Новая
       2

добавить событие `load` для КАЖДОГО iFrame на странице

0 голосов
/ 11 сентября 2018

У меня есть страница, на которой динамически добавляются iFrames.Я хочу перехватить событие "onLoad" для каждого iFrame.

Итак, я хочу прикрепить событие к телу, но применить его к каждому дочернему iFrame.Это работает для других событий, но кажется, что событие «загрузки» не распространяется.

Вот что я пробовал до сих пор: 

$(document).on("load", "iframe", function() {
	$("body").append("this is what I want, but it doesn't work!");
});

var iFrame = $("<iframe/>", {
        srcdoc  : "<html style='overflow: hidden;'><body>Appended iFrame</body></html>"
});

$("body").append(iFrame);

iFrame.on("load",function(){
	$("body").append("this seems to work.... but isn't what I'm looking for.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

и вот оно на jsfiddle: https://jsfiddle.net/skeets23/qsrf802z/8/

Есть ли способ заставить работать так, как ожидалось?Таким образом, я могу просто создать одну привязку, и она будет работать для любого числа динамически добавляемых iFrames?

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018

Кажется, вы хотите добавить iframe динамически, поэтому лучший метод - это событие catch DOMNodeInserted документа.Смотрите пример следующим образом: 

$(document).on('DOMNodeInserted', function(e) {
    //check is iframe is loaded
    if(e.target.localName=="iframe"){
      console.log("New iframe loaded!");
      $("div").append("this does NOT seem to work!");
    };
});
function addIframe(){
    var iFrame = $("<iframe />", {
            srcdoc  : "<html style='overflow: hidden;'><body>Appended iFrame</body></html>"
    });
    $("body").append(iFrame);
    iFrame.on("load",function(){
      $("div").append("this seems to work....");
    });
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button onclick="addIframe();">Add Iframe</button>
    <div>

    </div>
0 голосов
/ 11 сентября 2018

Измените $(document).on("load" ... на $("iframe").on("load", .... И поместите его в конец скрипта, он будет работать! 

var iFrame = $("<iframe />", {
        srcdoc  : "<html style='overflow: hidden;'><body>Appended iFrame</body></html>"
});

$("body").append(iFrame);

iFrame.on("load",function(){
	$("div").append("this seems to work....");
  //alert("cde");
});
$("iframe").on("load", function () {
	$("div").append("this does NOT seem to work!");
  alert("abc");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>

    </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...