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は、画像のコレクションを返しています。コレクション全体でクリックハンドラを設定するだけでは不十分です。一度に1つずつループする必要があります。

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