如何使用 JQuery 将点击事件添加到 iframe

How to add click event to a iframe with JQuery

提问by Justin Lucente

I have an iframe on a page, coming from a 3rd party (an ad). I'd like to fire a click event when that iframe is clicked in (to record some in-house stats). Something like:

我在页面上有一个 iframe，来自第 3 方（广告）。我想在点击 iframe 时触发点击事件（记录一些内部统计数据）。就像是：

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

..based on HTML of:

..基于HTML：

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

I can't seem to get any variation of this to work. Thoughts?

我似乎无法得到任何变化的工作。想法？

回答by Traveling Tech Guy

There's no 'onclick' event for an iframe, but you can try to catch the click event of the document in the iframe:

iframe 没有 'onclick' 事件，但您可以尝试在 iframe 中捕获文档的 click 事件：

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

EDITThough this doesn't solve your cross site problem, FYI jQuery has been updated to play well with iFrames:

编辑虽然这不能解决您的跨站点问题，但仅供参考 jQuery 已更新以与 iFrames 配合使用：

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

Update 1/2015The link to the iframe explanation has been removed as it's no longer available.

2015年 1 月更新指向 iframe 说明的链接已被删除，因为它不再可用。

NoteThe code above will not work if the iframe is from different domain than the host page. You can still try to use hacks mentioned in comments.

注意如果 iframe 来自与主机页面不同的域，则上面的代码将不起作用。您仍然可以尝试使用评论中提到的技巧。

回答by Vince

Try using this : iframeTracker jQuery Plugin, like that :

尝试使用这个：iframeTracker jQuery Plugin，就像这样：

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

回答by Kevin

I was trying to find a better answer that was more standalone, so I started to think about how JQuery does events and custom events. Since click (from JQuery) is just any event, I thought that all I had to do was trigger the event given that the iframe's content has been clicked on. Thus, this was my solution

我试图找到一个更独立的更好的答案，所以我开始考虑 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
        });
    });
});

回答by Jhonatan S. Souza

It works only if the frame contains page from the same domain (does not violate same-origin policy)

仅当框架包含来自同一域的页面时才有效（不违反同源策略）

See this:

看到这个：

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

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

回答by Justin Fenn

You could simulate a focus/click event by having something like the following. (adapted from $(window).blur event affecting Iframe)

您可以通过类似以下内容来模拟焦点/单击事件。（改编自$(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");
})

回答by ramigg

None of the suggested answers worked for me. I solved a similar case the following way:

没有一个建议的答案对我有用。我通过以下方式解决了类似的情况：

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

The css(of course exact positioning should change according to the app requirements):

css（当然确切的定位应该根据应用程序的要求而改变）：

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

Of course now you can catch any event on the iframe-wrapper.

当然，现在您可以在 iframe 包装器上捕获任何事件。

回答by mst

You can use this code to bind click an element which is in iframe.

您可以使用此代码绑定单击 iframe 中的元素。

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

回答by maxiplay

Solution that work for me :

对我有用的解决方案：

var editorInstance = CKEDITOR.instances[this.editorId];

            editorInstance.on('focus', function(e) {

                console.log("tadaaa");

            });

回答by charlie carver

This may be interesting for ppl using Primefaces (which uses CLEditor):

这对于使用 Primefaces（使用 CLEditor）的人来说可能很有趣：

document.getElementById('form:somecontainer:editor')
.getElementsByTagName('iframe')[0].contentWindow
.document.onclick = function(){//do something}

I basically just took the answer from Travelling Tech Guy and changed the selection a bit .. ;)

我基本上只是从 Traveling Tech Guy 那里得到答案并稍微改变了选择.. ;)

回答by VasylChepil

You can solve it very easily, just wrap that iframe in wrapper, and track clicks on it.

您可以非常轻松地解决它，只需将该 iframe 包装在包装器中，然后跟踪点击次数即可。

Like this:

像这样：

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

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

And disable pointer events on iframe itself.

并在 iframe 本身上禁用指针事件。

#iframe_id { pointer-events: none; }

#iframe_id { pointer-events: none; }

After this changes your code will work like expected.

在此更改后，您的代码将按预期工作。

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

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