読者です 読者をやめる 読者になる 読者になる

@テク野路ジーロード

配信タグシェアリングシステムpickvyを開発、運営開始。最近は、Googleアナリティクスを研究中

iframe内のクリックイベントを検知する方法

日曜は暖かかったのに、月曜日と火曜日でまた寒くなって、家がやっぱ最高!
なんて思いながら、早く春よこいこいと願うsunday150です。

さて、 また、メモしておきます。

 

■iframe内のクリック位置検知

成功。
以下を参考にさせて頂きました。ありがとうございます。

JS: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で動きました。

d.hatena.ne.jp