javascript - 检测 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() {

这会起作用吗？不。您将获得一个包含文档中所有 img 元素的对象(准确地说，是一个 NodeList)。您正在向该对象添加一个 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;
}