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

检测iframe内的图片点击次数

2 个答案: