Обнаружение щелчков изображений внутри iframe

Question

Я не могу понять, почему это не работает. Это, наверное, что-то простое. IFrame относится к тому же домену, что и родительская.

Я знаю, что могу использовать jQuery, но я хочу научиться делать это в чистом JavaScript.

Мой код до сих пор:

document.getElementById('my_iframe').onload = function() { 
    document.getElementById('my_iframe').contentWindow.document.getElementsByTagName('img').onclick = function() { 
     alert("image in iframe was clicked"); 
    } 
} 

Answer 1

Забудьте кадр бизнес на секунду, и посмотреть на этот код:

document.getElementsByTagName('img').onclick = function() { 

Будет ли когда-нибудь работать? Нет. Вы получаете объект (NodeList, если быть точным), содержащий все элементы img в документе. Вы добавляете к этому объекту свойство onclick. Не к самим элементам: к объекту, который указывает на них. Функция никогда не будет запущена, потому что она никогда не применяется к каким-либо элементам.

Вы должны сделать то же самое, что и вы, как правило,: зацикливайте все найденные изображения и примените их к ним по отдельности.

var onclickFn = function() { 
     alert("image in iframe was clicked"); 
    }, 
    images = document.getElementById('my_iframe').contentWindow.document.getElementsByTagName('img'); 

for (var i = 0; i < images.length; i++) { 
    images[i].onclick = onclickFn; 
} 

Answer 2

document.getElementsByTagName возвращается в коллекцию изображений. Вы не можете просто установить обработчик кликов для всей коллекции. Вам нужно прокручивать их по одному за раз.

var allimgs = document.getElementById('my_iframe').contentWindow.document.getElementsByTagName('img'); 

for (var i = 0; i < allimgs.length; i++) { 
    allimgs[i].onclick = function() { 
     alert("image in iframe was clicked"); 
    }; 
}