Вопросы Теги

Как регистрировать пользовательские события в Iframe [дубликат] 

    .t-table {
     border: 1px solid black;
     height: 400px;
     border-collapse: collapse;
     display: table-cell;
    }
    td {
     border: 1px solid black;
     padding:5px;
    }

  https://jsfiddle.net/pf8g49h2/
100
задан Russ Bradberry 4 March 2010 в 18:25
поделиться

18 ответов

Возможно ли подобное?

Нет. Все, что вы можете сделать, это обнаружить, что мышь переходит в iframe и потенциально (хотя и не надежно), когда она возвращается (т. Е. Пытается разобраться в различии между указателем, проходящим по объявлению на своем пути где-то в другом месте, или задерживаться на ad).

Я представляю сценарий, в котором есть невидимый div поверх iframe, и div будет просто передавать событие click в iframe.

Нет, не существует способа подделать событие click.

Улавливая мульдаун, вы не позволили исходному клику перейти к iframe. Если бы вы могли определить, когда будет нажата кнопка мыши, вы можете попытаться отключить невидимый div, чтобы клик прошел ... но также нет события, которое срабатывает непосредственно перед уходом.

Вы могли бы попытаться угадать, например, посмотрев, поместился ли указатель, предполагая, что щелчок может наступить. Но это абсолютно ненадежно, и если вы не справитесь, вы просто потеряли себе доступ к клику.

35
ответ дан bobince 20 August 2018 в 07:58
поделиться

см. 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();
5
ответ дан Boolean_Type 20 August 2018 в 07:58
поделиться
  • 1
    этот код не работает на IE8 :( – Natraj 6 March 2013 в 16:18
  • 2
    Его потрясающий человек-кодировщик .... что на самом деле я хочу ... + 1 до @Omar Jackman .. так много полезного для захвата нажмите на рекламу youtube – saun4frsh 29 October 2013 в 15:43

Я считаю, что вы можете сделать что-то вроде: 

$('iframe').contents().click(function(){function to record click here });

, используя jQuery для выполнения этого.

0
ответ дан Daniel Sellers 20 August 2018 в 07:58
поделиться

Это небольшое решение, которое работает во всех браузерах даже IE8: 

var monitor = setInterval(function(){
    var elem = document.activeElement;
    if(elem && elem.tagName == 'IFRAME'){
        clearInterval(monitor);
        alert('clicked!');
    }
}, 100);

Вы можете проверить его здесь: http://jsfiddle.net/oqjgzsm0/

66
ответ дан Dmitry Kochin 20 August 2018 в 07:58
поделиться
  • 1
    Что делать, если у вас есть несколько фреймов и вы не знаете их идентификатор? – shankshera 28 August 2015 в 08:15
  • 2
    Это отлично сработало для меня. Спасибо! – Inigo 16 September 2015 в 16:38
  • 3
    только кросс-браузерное надежное решение, которое также работает в последнем FF! Большое спасибо. Он заслуживает большего внимания – BrainOverflow 12 October 2015 в 11:33
  • 4
    @shankshera Просто получите elem.id, это ваш идентификатор iframe :). См. jsfiddle.net/oqjgzsm0/219 – Tomáš Kafka 17 February 2016 в 16:35
  • 5
    Помимо того, что использование интервала непрерывного цикла с такой скоростью не очень хорошая идея, это обнаружит ложные срабатывания, если пользователь установит фокус на iframe через навигацию по клавишам табуляции – Kaiido 23 April 2016 в 10:43

Это, безусловно, возможно. Это работает в Chrome, Firefox и IE 11 (и, возможно, другие). 

focus();
var listener = window.addEventListener('blur', function() {
    if (document.activeElement === document.getElementById('iframe')) {
        // clicked
    }
    window.removeEventListener('blur', listener);
});

JSFiddle

Предостережение: это определяет только первый клик. Как я понимаю, это все, что вам нужно.

96
ответ дан galambalazs 20 August 2018 в 07:58
поделиться
  • 1
    Интересно, почему у этого ответа есть 0 upvotes. Это действительно работает. – the_joric 30 March 2015 в 11:16
  • 2
    @the_joric, это потому, что прошло 4 года после вопроса, и люди обычно не прокручивают предыдущие ответы. – Paul Draper 30 March 2015 в 18:32
  • 3
    Также обратите внимание, что если вы измените вкладки браузера, он запустит focus (); – Linnay 31 March 2015 в 04:31
  • 4
    Он НЕ работает в Firefox. JSFiddle содержит ошибку, которая скрывает это: = вместо ===. Существует решение crossbrowser (даже в IE8): stackoverflow.com/a/32138108/1064513 – Dmitry Kochin 21 August 2015 в 10:34
  • 5
    Событие размытия не срабатывает, если пользователь сначала не щелкнет по основному документу! Кроме того, это невозможно использовать для обнаружения кликов для нескольких фреймов, поскольку нет события, которое срабатывает при изменении фокуса с одного iframe на другое (событие iframe blur не срабатывает). – Tomáš Kafka 17 February 2016 в 16:43

Это определенно работает, если 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 */ });

Без 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
  }
});
1
ответ дан Jonathan Tonge 20 August 2018 в 07:58
поделиться

Следующий код покажет вам, будет ли пользователь нажимать / навешивать или перемещаться из 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>

Вам нужно заменить src в iframe своей собственной ссылкой. Надеюсь, это поможет. С уважением, Мо.

35
ответ дан Kostiantyn Rybnikov 20 August 2018 в 07:58
поделиться
  • 1
    Основываясь на быстром тестировании, данный пример (после исправления URL-адреса), похоже, работает в IE 8, несколько надежно в Chrome 14.0.835.186 m, но совсем не в Firefox 6.0.2. – Matthew Flaschen 24 September 2011 в 00:54
  • 2
    Кажется, здесь не работает, с iframe iframe. – Anoyz 10 October 2013 в 22:26
  • 3
    – slesh 2 October 2018 в 11:27

Как найдено там: Обнаруживать Щелкните в Iframe с помощью JavaScript

=> Мы можем использовать iframeTracker-jquery : 

$('.carousel-inner .item').each(function(e) {
    var item = this;
    var iFrame = $(item).find('iframe');
    if (iFrame.length > 0) {
        iFrame.iframeTracker({
            blurCallback: function(){
                // Do something when iFrame is clicked (like firing an XHR request)
                onItemClick.bind(item)(); // calling regular click with right context
                console.log('IFrameClick => OK');
            }
        });
        console.log('IFrameTrackingRegistred => OK');
    }
})
0
ответ дан Mickaël 20 August 2018 в 07:58
поделиться

На основании ответа Мохаммеда Радвана я придумал следующее решение jQuery. В основном, что он делает, это отслеживать, что люди iFrame парят. Затем, если окно размывается, что, скорее всего, означает, что пользователь щелкнул баннер iframe.

iframe следует поместить в div с идентификатором, чтобы убедиться, что вы знаете, какой iframe пользователь нажал на: 

<div class='banner' bannerid='yyy'>
    <iframe src='http://somedomain.com/whatever.html'></iframe>
<div>

so: 

$(document).ready( function() {
    var overiFrame = -1;
    $('iframe').hover( function() {
        overiFrame = $(this).closest('.banner').attr('bannerid');
    }, function() {
        overiFrame = -1
    });

... это удерживает overiFrame в -1, когда iFrames не зависает, или «баннид», установленный в оберточном 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 не зарегистрировали его.

Еще раз спасибо Мохаммеду, очень полезное решение!

100
ответ дан patrick 20 August 2018 в 07:58
поделиться
  • 1
    Я вижу в своей статистике, что получил нисходящий ... ehm ... почему? – patrick 7 September 2012 в 10:01
  • 2
    Вверните этого идиота, который сделал это !!!! Отличный ответ, спасибо. :) – Imtiaz 24 October 2013 в 22:46
  • 3
    Работает на FF, Chrome, новой Opera, IE 11. Благословит вас Бог :) – Damonsson 10 December 2013 в 00:38
  • 4
    Даже работает над рекламой Google AdSense :) – patrick 15 January 2015 в 21:42
  • 5
    Этот ответ является лучшим из них, однако, если вы хотите получать каждый клик в iframe, , вам нужно сосредоточиться на нем, как только пользователь нажал , чтобы отслеживать дальнейшие клики. Это нужно добавить в раздел $ (window) .blur (): setTimeout(function(){ window.focus(); }, 0);. Теперь пользователь нажимает, помещает фокус в iframe, сценарий возвращает этот фокус и теперь может отслеживать дальнейшие изменения фокуса от будущих кликов. – HelpingHand 6 September 2016 в 15:49

Я столкнулся с ситуацией, когда мне приходилось отслеживать клики на кнопке в социальных сетях, втянутой через iframe. При нажатии кнопки открывается новое окно. Вот мое решение: 

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();
3
ответ дан pizza-r0b 20 August 2018 в 07:58
поделиться

http://jsfiddle.net/QcAee/406/

Просто создайте невидимый слой над iframe, который возвращается, когда нажимаем и поднимаемся, когда событие mouseleave будет уволен! Нужно jQuery

это решение не распространяется первым щелчком внутри 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>

2
ответ дан r1si 20 August 2018 в 07:58
поделиться

Это работает для меня во всех браузерах (включая 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 id="idanmorblog" src="https://sidanmor.com/" style="width:400px;height:600px" ></iframe>

3
ответ дан sidanmor 20 August 2018 в 07:58
поделиться

Вы можете сделать это, чтобы пузырить события в родительский документ: 

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

Просто расширьте список событий для большего количества событий.

3
ответ дан Taner Topal 20 August 2018 в 07:58
поделиться
  • 1
    Я использовал событие «touchhend», и это сработало! Ваш ответ мне очень помог! – user 14 January 2016 в 16:47

Просто нашел это решение ... Я попробовал, мне понравилось ..

Работает для междоменных iframe для рабочего стола и мобильных устройств!

Не знаю, fulproof yet 

window.addEventListener('blur',function(){
      if(document.activeElement.id == 'CrossDomainiframeId'){
        //do something :-)
      }
});

Счастливое кодирование

10
ответ дан Tony 20 August 2018 в 07:58
поделиться

Вы можете добиться этого, используя событие blur на элементе window.

Вот плагин jQuery для отслеживания щелчка по iframes (он будет запускать пользовательскую функцию обратного вызова при нажатии iframe): 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)
        }
    });
});
5
ответ дан Vince 20 August 2018 в 07:58
поделиться

Мохаммед Радван, ваше решение элегантно. Чтобы обнаружить iframe-клики в Firefox и IE, вы можете использовать простой метод с document.activeElement и таймер, однако ... Я искал по всем interwebs метод обнаружения кликов на iframe в Chrome и Safari. На грани сдачи я нахожу ваш ответ. Спасибо, сэр!

Некоторые советы: я нашел ваше решение более надежным при вызове функции init () напрямую, а не через attachOnloadEvent (). Конечно, для этого вы должны вызвать init () только после iframe html. Таким образом, это будет выглядеть примерно так: 

<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>
3
ответ дан zone117x 20 August 2018 в 07:58
поделиться
0
ответ дан freedeveloper 31 October 2018 в 06:52
поделиться
0
ответ дан slesh 31 October 2018 в 06:52
поделиться
Другие вопросы по тегам:

Похожие вопросы: