如何click事件添加到使用jQuery一个IFRAME如何click事件添加到使用jQuery一个

我有一个网页的iframe，从第三方（广告）的到来。 我想点击该iframe时（记录一些内部统计）火click事件。 就像是：

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

..based上的HTML：

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

我似乎无法得到这个任何变化工作。 思考？

Answer 1:

有一个iframe中没有的“onClick”事件，但你可以尝试赶上在iframe文档的单击事件：

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

编辑虽然这没有解决您的跨站点问题，仅供参考jQuery的已更新的iFrame发挥出色：

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

更新二千零十五分之一到iframe中解释该链接已被删除，因为它是不再可用。

注意上面的代码，如果iframe是从除主机页面不同的域将无法正常工作。 你还可以尝试使用在评论中提到黑客。

Answer 2:

尝试使用这样的： iframeTracker jQuery插件 ，这样的：

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

Answer 3:

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

Answer 4:

它的工作原理只有在画面中包含相同的域页面（不违反同源策略）

看到这一点：

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

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

Answer 5:

你可以模拟一个焦点/具有类似于以下单击事件。 （改编自$（窗口）.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"); }) 

Answer 6:

建议的答案都不为我工作。 我解决了类似的情况下，下面的方法：

<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包装的任何事件。

Answer 7:

您可以使用此代码绑定点击这是在IFRAME元素。

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

Answer 8:

这可能是使用Primefaces（使用CLEditor）PPL有趣：

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

我基本上只是把答案从旅游科技人，改变了选择有点..;）

Answer 9:

解决方案，为我工作：

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

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

                console.log("tadaaa");

            });

Answer 10:

你可以解决它很容易，只是包装该iframe的包装，并跟踪其点击次数。

像这样：

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

和IFRAME本身禁用指针事件。

#iframe_id { pointer-events: none; }

在此之后改变你的代码会像预期。

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

文章来源: How to add click event to a iframe with JQuery