Обнаружение кликов изображений внутри 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");
    };
}