检测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; 
} 

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"); 
    }; 
}