Question

我在页面上有一个iframe来自第三方（广告）。我想在点击iframe时发出点击事件（记录一些内部统计数据）。类似的东西：

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

..基于HTML：

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

我似乎无法对此进行任何变化。想法？

Answer 1

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

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

修改虽然这不能解决您的跨站点问题，但FYI jQuery已经更新，可以很好地与iFrames配合使用：

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

2015年第1期更新 iframe解释的链接已被删除，因为它已不再可用。

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

Answer 2

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

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

Answer 3

我试图找到一个更独立的更好的答案，所以我开始思考JQuery如何做事件和自定义事件。由于click（来自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

您可以通过具有以下内容来模拟焦点/点击事件。（改编自$(window).blur event affecting Iframe）

＆＃13;

$(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");
})

＆＃13;

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-wrapper上捕获任何事件。

Answer 7

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

＆＃13;

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

＆＃13;

Answer 8

可能有点旧，但这可能对尝试处理相同域策略的人有用。

let isOverIframe = null;
$('iframe').hover(function() {
        isOverIframe = true;
    }, function() {
        isOverIframe = false;
    });

$(window).on('blur', function() {
    if(!isOverIframe)
        return;

    // ...
});

基于https://gist.github.com/jaydson/1780598

Answer 9

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

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

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

Answer 10

适合我的解决方案：

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

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

                console.log("tadaaa");

            });

Answer 11

您可以很轻松地解决它，只需将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 });

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

11 个答案: