检测使用JavaScript点击进入Iframe
我知道，如果它是跨域，不可能告诉用户在iframe做什么。 我想要做的就是跟踪用户是否点击了iframe中的所有内容。 我想象一下在iframe之上有一个不可见div的情况， div将会把click事件传递给iframe 。
是这样的可能吗？ 如果是的话，那我该怎么办呢？ iframes是广告，所以我无法控制使用的标签。
是这样的可能吗？
不是。你所能做的只是检测鼠标进入iframe，当它返回时潜在地（尽pipe不可靠）（即试图弄清指针在其他地方通过广告的方式与拖延时间在广告上）。
我想象一下在iframe之上有一个不可见div的情况，div将会把click事件传递给iframe。
不，没有办法伪造一个点击事件。
通过捕捉mousedown，您可以防止原始点击进入iframe。 如果你可以确定什么时候按下鼠标button，你可以尝试让隐藏的div离开，这样点击就会通过…但是在mousedown之前也没有事件发生。
您可以尝试猜测，例如通过查看指针是否已经停止，猜测点击可能即将到来。 但它是完全不可靠的，如果你失败了，你只是失去了一个点击。
根据Mohammed Radwan的回答，我提出了以下jQuery解决scheme。 基本上它是跟踪什么iFrame人徘徊。 然后，如果窗口模糊，最有可能意味着用户点击iframe横幅。
应该把iframe放在一个带有id的div中，以确保你知道用户点击了哪个iframe：
<div class='banner' bannerid='yyy'> <iframe src='http://somedomain.com/whatever.html'></iframe> <div>
所以：
$(document).ready( function() { var overiFrame = -1; $('iframe').hover( function() { overiFrame = $(this).closest('.banner').attr('bannerid'); }, function() { overiFrame = -1 });
…当没有iFrames被徘徊的时候，这会保持overiFrame为-1，或者当iframe被徘徊的时候，在包装div中设置'bannerid'。 所有你需要做的是检查是否设置“overiFrame”当窗口模糊，如下所示：…
$(window).blur( function() { if( overiFrame != -1 ) $.post('log.php', {id:overiFrame}); /* example, do your stats here */ }); });
非常优雅的解决scheme有一个小缺点：如果用户在将鼠标hover在iFrame上时按下ALT-F4，则会将其logging为点击。 这只发生在FireFox，但IE，Chrome和Safari没有注册。
再次感谢穆罕默德，非常有用的解决scheme！
这当然是可能的。 这适用于Chrome，Firefox和IE 11（可能还有其他）。
focus(); var listener = window.addEventListener('blur', function() { if (document.activeElement === document.getElementById('iframe')) { // clicked } window.removeEventListener('blur', listener); });
的jsfiddle
注意：这只能检测到第一次点击。 据我所知，这就是你想要的。
这是一个适用于所有浏览器甚至IE8的小型解决scheme：
var monitor = setInterval(function(){ var elem = document.activeElement; if(elem && elem.tagName == 'IFRAME'){ clearInterval(monitor); alert('clicked!'); } }, 100);
你可以在这里testing它： http : //jsfiddle.net/oqjgzsm0/
以下代码会显示用户是否单击/hover或移出iframe：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Detect IFrame Clicks</title> <script type="text/javascript"> $(document).ready(function() { var isOverIFrame = false; function processMouseOut() { log("IFrame mouse >> OUT << detected."); isOverIFrame = false; top.focus(); } function processMouseOver() { log("IFrame mouse >> OVER << detected."); isOverIFrame = true; } function processIFrameClick() { if(isOverIFrame) { // replace with your function log("IFrame >> CLICK << detected. "); } } function log(message) { var console = document.getElementById("console"); var text = console.value; text = text + message + "\n"; console.value = text; } function attachOnloadEvent(func, obj) { if(typeof window.addEventListener != 'undefined') { window.addEventListener('load', func, false); } else if (typeof document.addEventListener != 'undefined') { document.addEventListener('load', func, false); } else if (typeof window.attachEvent != 'undefined') { window.attachEvent('onload', func); } else { if (typeof window.onload == 'function') { var oldonload = onload; window.onload = function() { oldonload(); func(); }; } else { window.onload = func; } } } function init() { var element = document.getElementsByTagName("iframe"); for (var i=0; i<element.length; i++) { element[i].onmouseover = processMouseOver; element[i].onmouseout = processMouseOut; } if (typeof window.attachEvent != 'undefined') { top.attachEvent('onblur', processIFrameClick); } else if (typeof window.addEventListener != 'undefined') { top.addEventListener('blur', processIFrameClick, false); } } attachOnloadEvent(init); }); </script> </head> <body> <iframe src="www.google.com" width="100%" height="1300px"></iframe> <br></br> <br></br> <form name="form" id="form" action=""><textarea name="console" id="console" style="width: 100%; height: 300px;" cols="" rows=""></textarea> <button name="clear" id="clear" type="reset">Clear</button> </form> </body> </html>
您需要用自己的链接replaceiframe中的src。 希望这会有所帮助。 问候，莫。
刚刚find这个解决scheme…我试了一下，我喜欢它..
适用于桌面和移动设备的跨域iframe
不知道它是否是万无一失的
window.addEventListener('blur',function(){ if(document.activeElement.id == 'CrossDomainiframeId'){ //do something :-) } });
快乐的编码
请参阅http://jsfiddle.net/Lcy797h2/，以了解在IE中无法可靠运行的冗长解决scheme
$(window).on('blur',function(e) { if($(this).data('mouseIn') != 'yes')return; $('iframe').filter(function(){ return $(this).data('mouseIn') == 'yes'; }).trigger('iframeclick'); }); $(window).mouseenter(function(){ $(this).data('mouseIn', 'yes'); }).mouseleave(function(){ $(this).data('mouseIn', 'no'); }); $('iframe').mouseenter(function(){ $(this).data('mouseIn', 'yes'); $(window).data('mouseIn', 'yes'); }).mouseleave(function(){ $(this).data('mouseIn', null); }); $('iframe').on('iframeclick', function(){ console.log('Clicked inside iframe'); $('#result').text('Clicked inside iframe'); }); $(window).on('click', function(){ console.log('Clicked inside window'); $('#result').text('Clicked inside window'); }).blur(function(){ console.log('window blur'); }); $('<input type="text" style="position:absolute;opacity:0;height:0px;width:0px;"/>').appendTo(document.body).blur(function(){ $(window).trigger('blur'); }).focus();
您可以通过在窗口元素上使用blur事件来实现此目的。
这里是一个jQuery插件用于跟踪点击iframe（当点击一个iframe时它将触发自定义的callback函数）： https ： //github.com/finalclap/iframeTracker-jquery
像这样使用它：
jQuery(document).ready(function($){ $('.iframe_wrap iframe').iframeTracker({ blurCallback: function(){ // Do something when iframe is clicked (like firing an XHR request) } }); });
穆罕默德·拉登，你的解决scheme是优雅的。 要检测Firefox和IE浏览器中的iframe点击，您可以使用document.activeElement和一个计时器的简单方法，但是…我已经search了所有的interwebs一个方法来检测点击在Chrome和Safari浏览器中的iframe。 在放弃的边缘，我find了你的答案。 谢谢你，先生！
一些技巧：当直接调用init（）函数而不是attachOnloadEvent（）时，我发现你的解决scheme更加可靠。 当然要这样做，只能在iframe html之后调用init（）。 所以它看起来像这样：
<script> var isOverIFrame = false; function processMouseOut() { isOverIFrame = false; top.focus(); } function processMouseOver() { isOverIFrame = true; } function processIFrameClick() { if(isOverIFrame) { //was clicked } } function init() { var element = document.getElementsByTagName("iframe"); for (var i=0; i<element.length; i++) { element[i].onmouseover = processMouseOver; element[i].onmouseout = processMouseOut; } if (typeof window.attachEvent != 'undefined') { top.attachEvent('onblur', processIFrameClick); } else if (typeof window.addEventListener != 'undefined') { top.addEventListener('blur', processIFrameClick, false); } } </script> <iframe src="http://google.com"></iframe> <script>init();</script>
你可以做到这一点，以冒泡事件母文件：
$('iframe').load(function() { var eventlist = 'click dblclick \ blur focus focusin focusout \ keydown keypress keyup \ mousedown mouseenter mouseleave mousemove mouseover mouseout mouseup mousemove \ touchstart touchend touchcancel touchleave touchmove'; var iframe = $('iframe').contents().find('html'); // Bubble events to parent iframe.on(eventlist, function(event) { $('html').trigger(event); }); });
只需扩展事件列表以获取更多事件。
我遇到了一个情况，我不得不跟踪通过iframe插入的社交媒体button上的点击。 单击button时将打开一个新窗口。 这是我的解决scheme：
var iframeClick = function () { var isOverIframe = false, windowLostBlur = function () { if (isOverIframe === true) { // DO STUFF isOverIframe = false; } }; jQuery(window).focus(); jQuery('#iframe').mouseenter(function(){ isOverIframe = true; console.log(isOverIframe); }); jQuery('#iframe').mouseleave(function(){ isOverIframe = false; console.log(isOverIframe); }); jQuery(window).blur(function () { windowLostBlur(); }); }; iframeClick();
http://jsfiddle.net/QcAee/406/
只需在iframe上创build一个不可见的图层，当鼠标点击事件被点击时，点击并返回。
需要jQuery
这个解决scheme不会在iframe中传播第一次点击！
$("#invisible_layer").on("click",function(){ alert("click"); $("#invisible_layer").css("z-index",-11); }); $("iframe").on("mouseleave",function(){ $("#invisible_layer").css("z-index",11); });
iframe { width: 500px; height: 300px; } #invisible_layer{ position: absolute; background-color:trasparent; width: 500px; height:300px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="message"></div> <div id="invisible_layer"> </div> <iframe id="iframe" src="//example.com"></iframe>
这适用于所有浏览器（包括Firefox）
https://gist.github.com/jaydson/1780598
https://jsfiddle.net/sidanmor/v6m9exsw/
var myConfObj = { iframeMouseOver : false } window.addEventListener('blur',function(){ if(myConfObj.iframeMouseOver){ console.log('Wow! Iframe Click!'); } }); document.getElementById('idanmorblog').addEventListener('mouseover',function(){ myConfObj.iframeMouseOver = true; }); document.getElementById('idanmorblog').addEventListener('mouseout',function(){ myConfObj.iframeMouseOver = false; });
<iframe id="idanmorblog" src="https://sidanmor.com/" style="width:400px;height:600px" ></iframe>
如果iframe来自与您的父站点相同的域，这肯定会起作用。 我没有testing它的跨域网站。
$(window.frames['YouriFrameId']).click(function(event){ /* do something here */ }); $(window.frames['YouriFrameId']).mousedown(function(event){ /* do something here */ }); $(window.frames['YouriFrameId']).mouseup(function(event){ /* do something here */ });
没有jQuery，你可以尝试这样的事情，但我还没有尝试过。
window.frames['YouriFrameId'].onmousedown = function() { do something here }
你甚至可以过滤你的结果：
$(window.frames['YouriFrameId']).mousedown(function(event){ var eventId = $(event.target).attr('id'); if (eventId == 'the-id-you-want') { // do something } });
我相信你可以做这样的事情：
$('iframe').contents().click(function(){function to record click here });
使用jQuery来完成这一点。
