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