iframe内のクリックイベントを検知する方法
日曜は暖かかったのに、月曜日と火曜日でまた寒くなって、家がやっぱ最高！
なんて思いながら、早く春よこいこいと願うsunday150です。
さて、 また、メモしておきます。
■iframe内のクリック位置検知
成功。
以下を参考にさせて頂きました。ありがとうございます。
javascript全然覚えてない。。。ちゃんと理解しなきゃ。。。
ーーーここから追記ーーー
結果として、私の場合は以下のコードにしました。
window.onload = function() {
var iframes;
var ifdoc;
var pid;
iframes = document.getElementsByTagName('iframe');
for (var i = 0; i < iframes.length; i++) {
if(iframes[i]){
if (iframes[i].contentDocument) {
ifdoc= iframes[i].contentDocument;
} else {
ifdoc = iframes[i].Document;
}
if(iframes[i].parentNode.id){
pid = iframes[i].parentNode.id;
if(ifdoc.addEventListener){
ifdoc.addEventListener('click',detectclick(pid),true) ;
}else{
ifdoc.attachEvent('onclick',detectclick(pid)) ;
}
}
}
}
}
ちょっとわかりづらいですね。個別に説明していきます。
まず、以下で複数のiframeを辿れるようにしています。
- iframes = document.getElementsByTagName('iframe');
以下でiframe内のdocumentを取得しています。場合分けしているのはブラウザ違いを吸収するためです。
- ifdoc= iframes[i].contentDocument;
- ifdoc = iframes[i].Document;
ここからは私独自だと思うのですが、実はやりたいことが、クリックしたiframeの違いをイベントで知らせるために、親ノードのIDを関数に渡したいです。
そのために、イベントリスナーに処理登録するまえに、親ノードのIDを取得します。
- pid = iframes[i].parentNode.id;
あとは、処理させたい関数をイベントリスナーへ登録します。検知したいのは、クリックイベントなので'click'や'onclick'を登録します。
- ifdoc.addEventListener('click',func_xxx(pid),true) ;
- ifdoc.attachEvent('onclick',func_xxx(pid)) ;
もう一つおまけで書いてときます。
関数に引数を渡したいときに、今回ですとfunc_xxx(引数)のような形にしました。
- function detecttouch(引数) {
return function(event){
（引数を使った処理）
}
}
以下のページを参考にさせて頂きました。有難う御座います。
パターン1、2が書かれているのですが、私の環境ではパターン1は動作せず、パターン2で動きました。
