Виявити Клацніть на Iframe за допомогою JavaScript

128

Я розумію, що неможливо сказати, що користувач робить всередині, iframeякщо це крос-домен. Що я хотів би зробити, це відстежити, якщо користувач взагалі натиснув на iframe. Я уявляю сценарій, коли є невидимий divна вершині, iframeа divволя саме тоді передає подію натискання на iframe.

Чи можливо щось подібне? Якщо це так, то як би я пішов про це? Це iframesреклама, тому я не маю контролю над тегами, які використовуються.

— Расс Бредберрі
джерело

4

Цілком можливо , і є браузери рішення: stackoverflow.com/a/32138108/1064513

— Дмитро Кочин

39

Чи можливо щось подібне?

Ні. Все, що ви можете зробити, - це виявити мишу, що потрапляє в рамку кадрів, і потенційно (хоча і не надійно), коли вона виходить назад (тобто намагається розробити різницю між вказівником, що передає рекламу на своєму шляху десь в іншому місці, порівняно з затримкою на оголошення).

Я уявляю сценарій, коли поверх iframe є невидимий div, і div просто перейде події клацання до iframe.

Ні, немає способу підробити подію натискання.

Зловивши мусоване, ви не зможете оригінальному клацанню потрапити на рамку iframe. Якщо ви могли б визначити, коли саме натискатиметься кнопка миші, ви можете спробувати вивести невидимий дів із шляху, щоб клік пройшов через ... але також немає жодної події, яка запускається безпосередньо перед мусудоном.

Ви можете спробувати відгадати, наприклад, подивившись, чи не ввімкнувся вказівник, здогадавшись, що клацання може відбутися. Але це абсолютно ненадійно, і якщо ви провалилися, ви просто втратили собі перехід.

— бобінець
джерело

4

Так. І є браузери рішення: stackoverflow.com/a/32138108/1064513

— Дмитро Кочин

1

Я перевірив ці посилання і вважаю, що відповідь правильна. Ви можете виявити натискання всередині iframe, але не те, що було натиснуто.

— користувач568021

Я відмовляюсь, лише тому, що це не зовсім вірно. Більшість того, що ви говорите, є правдивим, але є обхідні шляхи, як і більш популярна відповідь у цій темі.

— newms87

154

Це, безумовно, можливо. Це працює в Chrome, Firefox та IE 11 (і, напевно, в інших).

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

JSFiddle

Caveat: Це виявляє лише перше клацання. Як я розумію, це все, що ти хочеш.

— Пол Дрейпер
джерело

1

@the_joric, це тому, що минуло 4 роки після запитання, і люди зазвичай не прокручують повз відповіді першої пари.

— Пол Дрейпер

3

Також слід зауважити, що якщо змінити вкладки браузера, це призведе до запуску фокусу ();

— Лінней

7

Він не працює у Firefox. JSFiddle містить помилку, яка приховує це: = замість ===. Є рішення крос-броусера (навіть в IE8): stackoverflow.com/a/32138108/1064513

— Дмитро Кочин

8

Подія розмивання не спрацьовує, якщо користувач спочатку не натисне на основний документ! Крім того, це не можна використовувати для виявлення кліків до декількох кадрів, оскільки немає події, яка запускається, коли фокус змінюється з одного iframe на інший ( blurподія iframe не спрацьовує).

— Томаш Кафка

1

чому існує залежність від фокусу ();

— Прасад Шінде

107

На основі відповіді Мухаммеда Радвана я придумав таке рішення jQuery. В основному, це те, що слідкуйте за тим, що люблять люди з iFrame. Потім, якщо вікно розмивається, що, швидше за все, означає, що користувач натиснув банер iframe.

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

<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
    });

... це зберігає overiFrame на -1, коли не зависає iFrames, або встановлено 'bannerid' у обгортковому поділі, коли накладено рамку 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 не зареєстрували його.

Ще раз дякую Мухаммед, дуже корисне рішення!

— патрик
джерело

У мене є відповідь +1, але вона має такі питання: 1. Коли є декілька кадрів, ви натискаєте на один із них, а потім відразу на інший - другий клацання не виявляється. 2. Кілька клацань всередині iframe також не враховуються. 3. Не працює належним чином на мобільному, тому що ти не можеш робити "наведення" подія пальцем.

— Січ

Наведений вище сценарій використовується мною для виявлення кліків від мого сайту. Більшість рекламних мереж зараз розміщують банери в рамках. Якщо ви натиснете один, а потім швидко інший, перш ніж ви пішли на перший клік, технічно я хочу знати останній клік, який ви насправді залишили. Тож у моєму випадку це бажана поведінка. Це також чудово виявляє кліки на мобільних банерах. Тож наведення потрібно запустити прямо до виконання клацання

— патрік

Не працює у випадку елементів svg у вмісті iframe :( stackoverflow.com/questions/32589735/…

— Сергій

@Serhiy, це тому, що ви фактично не виходите з оригінальної сторінки, натискаючи на iframe ...

— patrick

6

Ця відповідь є найкращою з них, однак, якщо ви хочете отримувати кожен клік у рамці iframe, вам слід вимкнути фокус на ньому, як тільки користувач натисне , щоб відстежувати подальші кліки. Це повинно бути додано в розділ $ (вікно) .blur (): setTimeout(function(){ window.focus(); }, 0);. Тепер користувач клацає, ставить фокус у кадр iframe, сценарій відводить цей фокус назад і тепер може відслідковувати подальші зміни фокусу від майбутніх кліків.

— HelpingHand

89

Це невелике рішення, яке працює у всіх браузерах навіть у IE8:

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

Ви можете протестувати тут: http://jsfiddle.net/oqjgzsm0/

— Дмитро Кочин
джерело

1

Що робити, якщо у вас є кілька кадрів, і ви не знаєте їх ідентифікатора?

— Шенкшера

1

єдине надійне рішення між браузером, яке також працює в останніх FF! Thx багато. Заслуговує на більше оновлень

— BrainOverflow

6

@shankshera Просто отримайте elem.id, це ваш idrame ID :). Дивіться jsfiddle.net/oqjgzsm0/219

— Томаш Кафка

1

Я використовую це для відстеження кліків на таких соціальних кнопках. Але оскільки 3/4 з тих, які я використовую, використовую iframes, мені потрібно відстежувати кліки в декількох iframes. Я оновив скрипку, щоб дозволити це: jsfiddle.net/oqjgzsm0/273 . Він встановлює новий інтервал, який перевіряє, чи не є клацання поза рамкою останнього натиснутого iframe. Потім скидає початковий інтервал, щоб перевірити ще раз кліки. Він не відстежує кілька кліків в одному кадрі без клацання поза ним.

— brouxhaha

14

Крім того, що використання інтервалу безперервного циклу з такою швидкістю не є дуже хорошою ідеєю, це виявить помилкові позитиви, якщо користувач встановить фокус на iframe через навігаційну клавішу вкладки

— Kaiido

36

Наступний код покаже вам, якщо користувач натисне / навести курсор чи переміститься з рамки 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 на власне посилання. Сподіваюся, це допоможе. З повагою, Mo.

— Мухаммед Радван
джерело

1

На основі швидкого тестування даний приклад (після виправлення URL-адреси), здається, працює в IE 8, дещо надійно в Chrome 14.0.835.186 м, але зовсім не в Firefox 6.0.2.

— Метью Флашен

Відмінно працює для Chrome, але не працює для Firefox v62, тому що при натисканні на iframe розмиття подія не кидається

— slesh

11

Щойно знайшов це рішення ... Я спробував це, мені сподобалось ..

Працює для міждоменних iframes для настільних та мобільних пристроїв!

Ще не знаю, чи це надійно

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

Щасливе кодування

— Тоні
джерело

2

Ця сама відповідь (можливо трохи краща версія) була розміщена на рік раніше тут, на цій самій сторінці: stackoverflow.com/a/23231136/470749

— Ryan

5

Ви можете досягти цього, використовуючи подію розмиття на елементі вікна.

Ось плагін 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

Дивіться на 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();

— DiverseAndRemote.com
джерело

Його дивовижна людина, що кодує .... що насправді я хочу ... + 1 до @Omar Jackman .. стільки корисного для зйомки натисніть на рекламу на YouTube

— saun4frsh

4

Це працює для мене у всіх браузерах (включено 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

Мухаммед Радван, ваше рішення елегантне. Щоб виявити кліки iframe у Firefox та IE, ви можете скористатися простим методом з document.activeElement та таймером, однак ... Я шукав по всьому інтерв'ю, щоб знайти спосіб виявлення кліків на iframe в Chrome та Safari. На межі здачі я знаходжу вашу відповідь. Дякую вам сер!

Деякі поради: Я вважав, що ваше рішення є більш надійним при виклику функції init () безпосередньо, а не через attachOnloadEvent (). Зрозуміло, щоб це зробити, ви повинні зателефонувати до init () лише після htram iframe. Так би виглядало приблизно так:

<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>

— зона117х
джерело

3

Ви можете зробити це, щоб події бульбашки перейшли до батьківського документа:

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

Просто розгорніть список подій для інших подій.

— Танер Топал
джерело

Я використовував "touchend" подію, і це спрацювало! Ваша відповідь мені дуже допомогла!

3

Я зіткнувся з ситуацією, коли мені довелося відслідковувати натискання кнопки в соціальних мережах, що перетягується через рамку. Після натискання кнопки відкриється нове вікно. Ось моє рішення:

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

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>

Розгорніть фрагмент

— r1si
джерело

1

Це безумовно працює, якщо кадр 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

Поєднання вищезазначеної відповіді з можливістю клацати знову і знову, не клацаючи поза рамкою iframe.

    var eventListener = window.addEventListener('blur', function() {
    if (document.activeElement === document.getElementById('contentIFrame')) {
        toFunction(); //function you want to call on click
        setTimeout(function(){ window.focus(); }, 0);
    }
    window.removeEventListener('blur', eventListener );
    });

— Талха Асиф
джерело

1

Ми можемо зловити всі кліки. Ідея полягає в тому, щоб скинути фокус на елемент поза iFrame після кожного клацання:

    <input type="text" style="position:fixed;top:-1000px;left:-1000px">
    <div id="message"></div>
    <iframe id="iframe" src="//example.com"></iframe>
    <script>
        focus();
        addEventListener('blur', function() {
            if(document.activeElement = document.getElementById('iframe')) {
                message.innerHTML += 'Clicked';
                setTimeout(function () {
                    document.querySelector("input").focus();
                    message.innerHTML += ' - Reset focus,';
                }, 1000);
            }  
        });
    </script>

JSFiddle

— Олександр Муравйов
джерело

0

Я вірю, ви можете зробити щось на кшталт:

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

використовуючи jQuery для цього.

— Даніель Селлерс
джерело

0

Як знайдено там: Виявити Клацніть на 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

Виходячи з відповіді Пола Дрейпера, я створив рішення, яке працює постійно, якщо у вас є 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();
            }
        });

Кодекс простий, розмиття події виявляє втрачену фокус при натисканні на кадр iframe і перевіряє, чи є активним елементом iframe (якщо у вас є декілька iframe, ви можете знати, хто був обраний), ця ситуація часто виникає, коли у вас є кадри реклами .

Друга подія запускає метод фокусування при поверненні на сторінку. для цього використовується подія зміни видимості.

— вільнорозробник
джерело

0

Ось рішення з використанням запропонованих підходів із наведенням курсора + розмиття та активними елементами елементів, а не будь-якими бібліотеками, просто чистими js. Відмінно працює для FF / Chrome. Здебільшого, підхід є таким самим, як запропоновано @Mohammed Radwan, за винятком того, що я використовую інший метод, запропонований @ zone117x для відстеження кліку iframe для FF, оскільки window.focus не працює без додаткових налаштувань користувача :

Здійснює прохання принести вікно спереду. Це може вийти з ладу через налаштування користувача, і вікно не гарантовано буде переднім перед тим, як цей метод повернеться.

Ось складний метод:

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;
            });
    }
}

— плоть
джерело

0

Припущення -

Ваш сценарій працює за межами iframe, АЛЕ НЕ в самому зовнішньому вікні window.top. (Для самого зовнішнього вікна інші розмиті розчини досить хороші)
Відкривається нова сторінка, що замінює поточну сторінку / нову сторінку в новій вкладці, а управління переходить на нову вкладку.

Це працює для обох sourceful і без вихідних фреймів

var ifr = document.getElementById("my-iframe");
var isMouseIn;
ifr.addEventListener('mouseenter', () => {
    isMouseIn = true;
});
ifr.addEventListener('mouseleave', () => {
    isMouseIn = false;
});
window.document.addEventListener("visibilitychange", () => {
    if (isMouseIn && document.hidden) {
        console.log("Click Recorded By Visibility Change");
    }
});
window.addEventListener("beforeunload", (event) => {
    if (isMouseIn) {
        console.log("Click Recorded By Before Unload");
    }
});

Якщо відкриється нова вкладка / вивантажується та сама сторінка, а вказівник миші знаходиться в межах рамки iframe, враховується клацання

— Сахіл Маніар
джерело