<p>я понимаю, что невозможно сказать, что пользователь делает внутри <code>iframe</code>, если это междоменный домен. то, что я хотел бы сделать, это отслеживать, если пользователь вообще нажал в <code>iframe</code>. я представляю себе сценарий, в котором есть невидимый <code>div</code> поверх <code>iframe</code>, и <code>div</code> просто передаст событие click <code>iframe</code>. </p><p>возможно ли что-то подобное? если это так, то как бы я поступил об этом? <code>iframes</code> - это объявления, поэтому я не могу контролировать используемые теги.</p>

<blockquote> <p>возможно ли что-то подобное?</p> </blockquote><p>нет. все, что вы можете сделать, это обнаружить мышь, входящую в iframe, и, возможно, (хотя и ненадежно), когда она вернется (т.е. попытаться определить разницу между указателем, проходящим над рекламой на его пути куда-то еще, и задерживающимся на объявлении).</p><blockquote> <p>я представляю себе сценарий, в котором наверху iframe находится невидимый div, и div просто передает событие click в iframe.</p> </blockquote><p>нет, нет способа подделать событие клика.</p><p>перехватывая mousedown, вы предотвратите попадание исходного клика в iframe. если бы вы могли определить, когда должна была быть нажата кнопка мыши, вы могли бы попытаться убрать невидимый элемент div, чтобы щелчок прошел ... но также не происходит событие, которое срабатывает непосредственно перед mousedown.</p><p>вы можете попытаться угадать, например, посмотрев, остановился ли указатель, предположив, что может произойти щелчок. но это совершенно ненадежно, и если вы терпите неудачу, вы просто теряете себе клик.</p>

<p>это конечно возможно. это работает в chrome, firefox и ie 11 (и, возможно, других).</p><pre><code>focus(); var listener = window.addeventlistener('blur', function() { if (document.activeelement === document.getelementbyid('iframe')) { // clicked } window.removeeventlistener('blur', listener); }); </code></pre><p> <a href="http://jsfiddle.net/qcaee/216">jsfiddle</a> </p><hr><p>предостережение: это обнаруживает только первый щелчок. как я понимаю, это все, что вы хотите.</p>

<p>основываясь на ответе мохаммеда радвана, я придумал следующее решение jquery. по сути, он отслеживает, что люди iframe парят. затем, если окно размывается, это, скорее всего, означает, что пользователь нажал на баннер iframe.</p><p>iframe должен быть помещен в div с идентификатором, чтобы вы знали, на какой iframe пользователь нажал:</p><pre><code><div class='banner' bannerid='yyy'> <iframe src='http://somedomain.com/whatever.html'></iframe> <div> </code></pre><p>так:</p><pre><code>$(document).ready( function() { var overiframe = -1; $('iframe').hover( function() { overiframe = $(this).closest('.banner').attr('bannerid'); }, function() { overiframe = -1 }); ... при этом overiframe сохраняет значение -1, когда iframes не наведены, или параметр bannerid, установленный в div для переноса, при наведении iframe. все, что вам нужно сделать, это проверить, установлен ли «overiframe», когда окно размывается, например: ... $(window).blur( function() { if( overiframe != -1 ) $.post('log.php', {id:overiframe}); / example, do your stats here / }); }); очень элегантное решение с небольшим недостатком: если пользователь нажимает alt-f4 при наведении курсора мыши на iframe, он регистрирует его как щелчок. это произошло только в firefox, хотя ie, chrome и safari не зарегистрировали его. еще раз спасибо, мухаммед, очень полезное решение!

это небольшое решение, которое работает во всех браузерах, даже в ie8:var monitor = setinterval(function(){ var elem = document.activeelement; if(elem && elem.tagname == 'iframe'){ clearinterval(monitor); alert('clicked!'); } }, 100); вы можете проверить это здесь: <a href="http://jsfiddle.net/oqjgzsm0/">http://jsfiddle.net/oqjgzsm0/ 

просто нашел это решение ..... я попробовал, мне понравилось ..работает для кросс-доменных фреймов для пк и мобильных устройств!еще не знаю, надежно ли этоwindow.addeventlistener('blur',function(){ if(document.activeelement.id == 'crossdomainiframeid'){ //do something :-) } }); удачного кодирования

см. <a href="http://jsfiddle.net/lcy797h2/">http://jsfiddle.net/lcy797h2/ для моего давно сложенного решения, которое не работает надежно в ie $(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(); </code></pre>

<p>вы можете добиться этого, используя событие размытия в элементе окна.</p><p>вот плагин jquery для отслеживания кликов по iframe (при нажатии на iframe будет запускаться пользовательская функция обратного вызова): <a href="https://github.com/finalclap/iframetracker-jquery">https://github.com/finalclap/iframetracker-jquery</a> </p><p>используйте это так:</p><pre><code>jquery(document).ready(function($){ $('.iframe\_wrap iframe').iframetracker({ blurcallback: function(){ // do something when iframe is clicked (like firing an xhr request) } }); }); </code></pre>

<p>мохаммед радван, ваше решение элегантно. чтобы обнаружить клики iframe в firefox и ie, вы можете использовать простой метод с document.activeelement и таймером, однако ... я искал во всех интервалах метод обнаружения кликов на iframe в chrome и safari. на грани отказа, я нахожу ваш ответ. спасибо, сэр!</p><p>несколько советов: я обнаружил, что ваше решение более надежно при непосредственном вызове функции init (), а не через attachonloadevent (). конечно, чтобы сделать это, вы должны вызывать init () только после html-кода iframe. так это будет выглядеть примерно так:</p><pre><code><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> </code></pre>

<p>это работает для меня во всех браузерах (включая firefox)</p><p> <a href="https://gist.github.com/jaydson/1780598">https://gist.github.com/jaydson/1780598</a> </p><p> <a href="https://jsfiddle.net/sidanmor/v6m9exsw/">https://jsfiddle.net/sidanmor/v6m9exsw/</a> </p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>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; });</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><iframe id="idanmorblog" src="https://sidanmor.com/" style="width:400px;height:600px" ></iframe></code></pre> </div> </div> </p><p><code><iframe id="idanmorblog" src="https://sidanmor.com/" style="width:400px;height:600px" ></iframe></code></p>

<p>я столкнулся с ситуацией, когда мне приходилось отслеживать клики на кнопках социальных сетей, вставленных через фрейм. новое окно будет открыто при нажатии кнопки. вот мое решение:</p><pre><code>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(); </code></pre>

<p>вы можете сделать это, чтобы передать события родительскому документу:</p><pre><code>$('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); }); }); просто расширьте список событий для большего количества событий.

 <a href="http://jsfiddle.net/qcaee/406/">http://jsfiddle.net/qcaee/406/ просто создайте невидимый слой поверх iframe, который будет возвращаться при щелчке и подниматься, когда будет запущено событие mouseleave !! нужен jqueryэто решение не распространяется первым кликом внутри iframe!<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override">$("#invisible\_layer").on("click",function(){ alert("click"); $("#invisible_layer").css("z-index",-11); }); $("iframe").on("mouseleave",function(){ $("#invisible_layer").css("z-index",11); }); <pre class="snippet-code-css lang-css prettyprint-override">iframe { width: 500px; height: 300px; } #invisible_layer{ position: absolute; background-color:trasparent; width: 500px; height:300px; } <pre class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="message"> <div id="invisible_layer">  <iframe id="iframe" src="//example.com"></iframe>   

это определенно работает, если iframe принадлежит тому же домену, что и ваш родительский сайт. я не проверял это для междоменных сайтов.$(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 */ }); </code></pre><p>без jquery вы могли бы попробовать что-то подобное, но опять же я не пробовал это.</p><pre><code>window.frames['youriframeid'].onmousedown = function() { do something here } </code></pre><p>вы даже можете отфильтровать результаты:</p><pre><code>$(window.frames['youriframeid']).mousedown(function(event){ var eventid = $(event.target).attr('id'); if (eventid == 'the-id-you-want') { // do something } }); </code></pre>

<p>вот решение, использующее предложенные подходы с hover + blur и трюками с активными элементами, а не какие-либо библиотеки, только чистый js. прекрасно работает для ff/chrome. в основном подход такой же, как предложенный @mohammed radwan, за исключением того, что я использую другой метод, предложенный @ zone117x, для отслеживания кликов iframe для ff, потому что <em>window.focus</em> не работает без добавления <a href="https://developer.mozilla.org/en-us/docs/web/api/window/focus">пользовательских настроек</a> :</p><blockquote> <p>делает запрос, чтобы вывести окно на передний план. может произойти сбой из-за пользовательские настройки и окно не гарантированно будут самыми передними этот метод возвращает.</p> </blockquote><p>вот сложный метод:</p><pre><code>function () { const state = {}; (function (setup) { if (typeof window.addeventlistener !== 'undefined') { window.addeventlistener('load', setup, false); } else if (typeof document.addeventlistener !== 'undefined') { document.addeventlistener('load', setup, false); } else if (typeof window.attachevent !== 'undefined') { window.attachevent('onload', setup); } else { if (typeof window.onload === 'function') { const oldonload = onload; window.onload = function () { oldonload(); setup(); }; } else { window.onload = setup; } } })(function () { state.isoveriframe = false; state.firstblur = false; state.hasfocusacquired = false; findiframesandbindlisteners(); document.body.addeventlistener('click', onclick); if (typeof window.attachevent !== 'undefined') { top.attachevent('onblur', function () { state.firstblur = true; state.hasfocusacquired = false; oniframeclick() }); top.attachevent('onfocus', function () { state.hasfocusacquired = true; console.log('attachevent.focus'); }); } else if (typeof window.addeventlistener !== 'undefined') { top.addeventlistener('blur', function () { state.firstblur = true; state.hasfocusacquired = false; oniframeclick(); }, false); top.addeventlistener('focus', function () { state.hasfocusacquired = true; console.log('addeventlistener.focus'); }); } setinterval(findiframesandbindlisteners, 500); }); function isff() { return navigator.useragent.search(/firefox/i) !== -1; } function isactiveelementchanged() { const prevactivetag = document.activeelement.tagname.touppercase(); document.activeelement.blur(); const curractivetag = document.activeelement.tagname.touppercase(); return !prevactivetag.includes('body') && curractivetag.includes('body'); } function onmouseout() { if (!state.firstblur && isff() && isactiveelementchanged()) { console.log('firefox first click'); onclick(); } else { document.activeelement.blur(); top.focus(); } state.isoveriframe = false; console.log(`onmouseout`); } function onmouseover() { state.isoveriframe = true; console.log(`onmouseover`); } function oniframeclick() { console.log(`oniframeclick`); if (state.isoveriframe) { onclick(); } } function onclick() { console.log(`onclick`); } function findiframesandbindlisteners() { return array.from(document.getelementsbytagname('iframe')) .foreach(function (element) { element.onmouseover = onmouseover; element.onmouseout = onmouseout; }); } } </code></pre>

<p>я считаю, что вы можете сделать что-то вроде:</p><pre><code>$('iframe').contents().click(function(){function to record click here }); используя jquery для достижения этой цели.

основываясь на ответе пола дрейпера, я создал решение, которое работает непрерывно, когда у вас есть iframes, которые открывают другие вкладки в браузере. когда вы возвращаете страницу, чтобы оставаться активным, чтобы обнаружить щелчок по структуре, это очень распространенная ситуация: focus(); $(window).blur(() => { let frame = document.activeelement; if (document.activeelement.tagname == "iframe") { // do you action.. here frame has the iframe clicked let frameid = frame.getattribute('id') let frameurl = (frame.getattribute('src')); } }); document.addeventlistener("visibilitychange", function () { if (document.hidden) { } else { focus(); } }); </code></pre><p>код прост, событие размытия обнаруживает потерю фокуса при щелчке по iframe и проверяет, является ли активный элемент iframe (если у вас есть несколько iframe, вы можете знать, кто был выбран), такая ситуация часто возникает, когда у вас есть рекламные кадры. ,.</p><p>второе событие вызывает метод фокусировки, когда вы возвращаетесь на страницу. используется событие изменения видимости.</p>