web-dev-qa-db-ja.com

JQueryを使用してiframeにクリックイベントを追加する方法

サードパーティ（広告）からのページにiframeがあります。そのiframeがクリックされたときにクリックイベントを発生させたい（社内統計を記録するため）。何かのようなもの：

$('#iframe_id').click(function() {
    //run function that records clicks
});

..HTMLに基づく：

<iframe id="iframe_id" src="http://something.com"></iframe>

これのバリエーションを機能させることはできないようです。考え？

jqueryiframeonclick
50
Justin Lucente

Iframeには「onclick」イベントはありませんが、iframeでドキュメントのクリックイベントをキャッチしようとすることができます。

document.getElementById("iframe_id").contentWindow.document.body.onclick = 
function() {
  alert("iframe clicked");
}

[〜＃〜] edit [〜＃〜]これはクロスサイトの問題を解決するものではありませんが、FYI jQueryはiFrameでうまく動作するように更新されました。

$('#iframe_id').on('click', function(event) { });

pdate 1/2015 iframeの説明へのリンクは使用できなくなったため削除されました。

注 iframeがホストページとは異なるドメインからのものである場合、上記のコードは機能しません。コメントに記載されているハックを引き続き使用することができます。

37
Traveling Tech Guy

これを使用してみてください： iframeTracker jQuery Plugin 、そのように：

jQuery(document).ready(function($){
    $('.iframe_wrap iframe').iframeTracker({
        blurCallback: function(){
            // Do something when iframe is clicked (like firing an XHR request)
        }
    });
});
16
Vince

私はよりスタンドアロンのより良い答えを見つけようとしていたので、JQueryがイベントとカスタムイベントをどのように処理するかについて考え始めました。クリック（JQueryから）は単なるイベントであるため、iframeのコンテンツがクリックされた場合、イベントをトリガーするだけでよいと考えました。したがって、これは私の解決策でした

$(document).ready(function () {
    $("iframe").each(function () {
        //Using closures to capture each one
        var iframe = $(this);
        iframe.on("load", function () { //Make sure it is fully loaded
            iframe.contents().click(function (event) {
                iframe.trigger("click");
            });
        });

        iframe.click(function () {
            //Handle what you need it to do
        });
    });
});
13
Kevin

フレームに同じドメインからのページが含まれている場合にのみ機能します（同一生成元ポリシーに違反しません）

こちらをご覧ください：

var iframe = $('#your_iframe').contents();

iframe.find('your_clicable_item').click(function(event){
   console.log('work fine');
});
7
Jhonatan S. Souza

次のようなことで、フォーカス/クリックイベントをシミュレートできます。 （ $（window）.blurイベントから影響を受け、Iframeに影響を与えます ）

$(window).blur(function () {
  // check focus
  if ($('iframe').is(':focus')) {
    console.log("iframe focused");
    $(document.activeElement).trigger("focus");// Could trigger click event instead
  }
  else {
    console.log("iframe unfocused");
  }                
});

//Test
$('#iframe_id').on('focus', function(e){
  console.log(e);
  console.log("hello im focused");
})
4
Justin Fenn

提案された答えはどれも私にとってはうまくいきませんでした。同様のケースを次の方法で解決しました。

<a href="http://my-target-url.com" id="iframe-wrapper"></a>
<iframe id="iframe_id" src="http://something.com" allowtrancparency="yes" frameborder="o"></iframe>

CSS（もちろん、アプリの要件に応じて正確な位置を変更する必要があります）：

#iframe-wrapper, iframe#iframe_id {
  width: 162px;
  border: none;
  height: 21px;
  position: absolute;
  top: 3px;
  left: 398px;
}
#alerts-wrapper {
  z-index: 1000;
}

もちろん、iframe-wrapperで任意のイベントをキャッチできます。

1
ramigg

このコードを使用して、iframe内の要素をクリックしてバインドできます。

jQuery('.class_in_iframe',jQuery('[id="id_of_iframe"]')[0].contentWindow.document.body).on('click',function(){  
        console.log("triggered !!")
});
1
mst