我的页面上有一个 iframe，来自第三方（广告）。我想在点击该 iframe 时触发一个点击事件（以记录一些内部统计数据）。比如：
$('#iframe_id').click(function() {
//run function that records clicks
});
..基于 HTML 的：
<iframe id="iframe_id" src="http://something.com"></iframe>
我似乎无法对此进行任何修改。想法？
【问题讨论】：
iframe 没有“onclick”事件，但您可以尝试在 iframe 中捕获文档的点击事件：
document.getElementById("iframe_id").contentWindow.document.body.onclick =
function() {
alert("iframe clicked");
}
编辑 虽然这并不能解决您的跨站点问题，但 FYI jQuery 已经更新，可以很好地与 iFrame 配合使用：
$('#iframe_id').on('click', function(event) { });
2015 年 1 月更新 iframe 说明的链接已被删除，因为它不再可用。
注意 如果 iframe 来自与主机页面不同的域，则上面的代码将不起作用。您仍然可以尝试使用 cmets 中提到的 hack。
【讨论】：
我试图找到一个更独立的更好答案，所以我开始思考 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
});
});
});
【讨论】：
尝试使用这个：iframeTracker jQuery Plugin，就像这样：
jQuery(document).ready(function($){
$('.iframe_wrap iframe').iframeTracker({
blurCallback: function(){
// Do something when iframe is clicked (like firing an XHR request)
}
});
});
【讨论】：
仅当框架包含来自同一域的页面时才有效（确实 不违反同源政策）
看这个：
var iframe = $('#your_iframe').contents();
iframe.find('your_clicable_item').click(function(event){
console.log('work fine');
});
【讨论】：
您可以通过以下方式模拟焦点/单击事件。 （改编自$(window).blur event affecting 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");
})【讨论】：
建议的答案都不适合我。我通过以下方式解决了类似的情况：
<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 上捕获任何事件。
【讨论】：
您可以使用此代码绑定单击 iframe 中的元素。
jQuery('.class_in_iframe',jQuery('[id="id_of_iframe"]')[0].contentWindow.document.body).on('click',function(){
console.log("triggered !!")
});【讨论】：
可能有点旧，但这可能对尝试处理同域策略的人有用。
let isOverIframe = null;
$('iframe').hover(function() {
isOverIframe = true;
}, function() {
isOverIframe = false;
});
$(window).on('blur', function() {
if(!isOverIframe)
return;
// ...
});
【讨论】：
您可能会遇到一些计时问题，具体取决于您绑定点击事件的时间，但它会将事件绑定到正确的窗口/文档。不过，实际上绑定到 iframe 窗口可能会得到更好的结果。你可以这样做：
var iframeWin = $('iframe')[0].contentWindow;
iframeWin.name = 'iframe';
$(iframeWin).bind('click', function(event) {
//Do something
alert( this.name + ' is now loaded' );
});
【讨论】：
这对于使用 Primefaces（使用 CLEditor）的 ppl 来说可能很有趣：
document.getElementById('form:somecontainer:editor')
.getElementsByTagName('iframe')[0].contentWindow
.document.onclick = function(){//do something}
我基本上只是从 Traveling Tech Guy 那里得到答案，并稍微改变了选择.. ;)
【讨论】：
适合我的解决方案：
var editorInstance = CKEDITOR.instances[this.editorId];
editorInstance.on('focus', function(e) {
console.log("tadaaa");
});
【讨论】：
您可以很容易地解决它，只需将该 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
});
【讨论】：