检测iframe内图像的点击

Detect clicks of images inside iframe

本文关键字：图像 iframe 检测      更新时间：2023-09-26

我不明白为什么这不起作用。可能是一些简单的东西。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");
    }
}

暂时不考虑框架的问题，看看下面的代码:

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

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");
    };
}
相关文章：