Rileva Click in Iframe usando JavaScript

128

Comprendo che non è possibile dire cosa sta facendo l'utente all'interno di un iframedominio incrociato. Quello che vorrei fare è tenere traccia se l'utente ha fatto clic su iframe. Immagino uno scenario in cui vi è un invisibile divin cima al iframee la divvolontà in quel momento passa l'evento click al iframe.

È possibile qualcosa del genere? Se lo è, come potrei procedere? Il iframessono annunci, quindi non ho alcun controllo sui tag che vengono utilizzati.

— Russ Bradberry
fonte

4

E 'possibile e non v'è soluzione di crossbrowser: stackoverflow.com/a/32138108/1064513

— Dmitry Kochin

39

È possibile qualcosa del genere?

No. Tutto quello che puoi fare è rilevare il mouse che entra nell'iframe e potenzialmente (anche se non in modo affidabile) quando viene fuori (ad esempio, cercando di capire la differenza tra il puntatore che passa sull'annuncio lungo la strada da qualche altra parte invece di indugiare sull'annuncio).

Immagino uno scenario in cui è presente un div invisibile sopra l'iframe e il div passerà quindi l'evento click all'iframe.

No, non è possibile falsificare un evento clic.

Catturando il mouse, impediresti al clic originale di raggiungere l'iframe. Se potessi determinare quando il pulsante del mouse stava per essere premuto, potresti provare a togliere il div invisibile in modo che il clic passasse ... ma non c'è nemmeno un evento che si attiva appena prima di una trappola.

Potresti provare a indovinare, ad esempio cercando di vedere se il puntatore si è fermato, supponendo che un clic potrebbe arrivare. Ma è totalmente inaffidabile e se fallisci ti sei appena perso un click-through.

— bobince
fonte

4

Sì. E non c'è soluzione crossbrowser: stackoverflow.com/a/32138108/1064513

— Dmitry Kochin

1

Ho controllato questi collegamenti e penso che la risposta sia corretta. Puoi rilevare solo un clic all'interno di iframe ma non ciò che è stato fatto clic.

— user568021,

Ho votato a fondo solo perché non è del tutto vero. La maggior parte di ciò che stai dicendo è vero, ma ci sono soluzioni alternative come la risposta più popolare su questo thread.

— newms87

154

Questo è certamente possibile. Funziona con Chrome, Firefox e IE 11 (e probabilmente altri).

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

JSFiddle

Avvertenza: rileva solo il primo clic. A quanto ho capito, questo è tutto ciò che vuoi.

— Paul Draper
fonte

1

@the_joric, è perché sono trascorsi 4 anni dalla domanda e normalmente le persone non scorrono oltre le prime risposte della coppia.

— Paul Draper,

3

Inoltre, si noti che se si modificano le schede del browser, verrà attivato il focus ();

— Linnay,

7

NON funziona in Firefox. JSFiddle contiene errori che nascondono questo: = invece di ===. Esiste una soluzione per i browser (anche in IE8): stackoverflow.com/a/32138108/1064513

— Dmitry Kochin,

8

L'evento di sfocatura non si attiva se l'utente non fa prima clic sul documento principale! Inoltre, questo non è utilizzabile per rilevare i clic su più iframe, in quanto non esiste alcun evento che si attiva quando lo stato attivo passa da un iframe a un altro (l' blurevento iframe non si attiva).

— Tomáš Kafka,

1

perché c'è dipendenza da focus ();

— Prasad Shinde,

107

Sulla base della risposta di Mohammed Radwan, ho trovato la seguente soluzione jQuery. Fondamentalmente ciò che fa è tenere traccia di ciò che le persone di iFrame sono in bilico. Quindi, se la finestra si sfoca, molto probabilmente significa che l'utente ha fatto clic sul banner iframe.

l'iframe dovrebbe essere inserito in un div con un ID, per essere sicuro di sapere su quale iframe l'utente ha fatto clic:

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

così:

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

... questo mantiene overiFrame a -1 quando non viene spostato alcun iFrame o il "bannerid" impostato nel div wrapping quando viene sospeso un iframe. Tutto quello che devi fare è controllare se 'overiFrame' è impostato quando la finestra si sfoca, in questo modo: ...

    $(window).blur( function() {
        if( overiFrame != -1 )
            $.post('log.php', {id:overiFrame}); /* example, do your stats here */
    });
});

Soluzione molto elegante con un piccolo aspetto negativo: se un utente preme ALT-F4 quando passa il mouse su un iFrame, lo registrerà come un clic. Questo è accaduto solo in FireFox, tuttavia IE, Chrome e Safari non lo hanno registrato.

Grazie ancora Mohammed, soluzione molto utile!

— patrick
fonte

Ho fatto +1 su questa risposta, sebbene abbia i seguenti problemi: 1. Quando ci sono più iframe, fai clic su uno di essi, quindi immediatamente su un altro - il secondo clic non viene rilevato. 2. Non vengono conteggiati anche i clic multipli all'interno di un iframe. 3. Non funziona correttamente sui dispositivi mobili, perché non è possibile eseguire l'evento "hover" con un dito.

— Sych,

Lo script sopra è usato da me per rilevare i clic di distanza dal mio sito. La maggior parte delle reti pubblicitarie ora offre banner in cornici. Se fai clic su uno e poi rapidamente su un altro prima di lasciare il primo clic, tecnicamente voglio sapere l'ultimo clic che hai effettivamente lasciato. Quindi nel mio caso è un comportamento ricercato. Rileva anche i clic sui banner per dispositivi mobili. Quindi l'hover deve essere lanciato subito prima dell'esecuzione del clic

— patrick,

Non funziona in caso di elementi svg nel contenuto iframe :( stackoverflow.com/questions/32589735/…

— Serhiy

@Serhiy, è perché non stai effettivamente uscendo dalla pagina originale quando fai clic sull'iframe ...

— patrick,

6

Questa risposta è la migliore, tuttavia, se si desidera ricevere ogni clic nell'iframe, è necessario focalizzarsi su di esso una volta che l'utente ha fatto clic per monitorare ulteriori clic. Questo dovrebbe essere aggiunto alla sezione $ (window) .blur (): setTimeout(function(){ window.focus(); }, 0);. Ora, l'utente fa clic, mette a fuoco l'iframe, lo script ritorna a quel fuoco e ora può monitorare ulteriori cambiamenti di fuoco dai clic futuri.

— HelpingHand

89

Questa è una piccola soluzione che funziona in tutti i browser anche IE8:

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

Puoi provarlo qui: http://jsfiddle.net/oqjgzsm0/

— Dmitry Kochin
fonte

1

E se hai diversi iframe e non conosci il loro ID?

— Shankshera,

1

unica soluzione affidabile tra browser che funziona anche con l'ultima versione di FF! Grazie mille. Merita più voti

— BrainOverflow,

6

@shankshera Basta ottenere elem.id, questo è il tuo ID iframe :). Vedi jsfiddle.net/oqjgzsm0/219

— Tomáš Kafka

1

Sto usando questo per tenere traccia dei clic sui pulsanti social come. Ma poiché 3/4 di quelli che sto usando usano iframe, devo tenere traccia dei clic in più iframe. Ho aggiornato il violino per consentirlo: jsfiddle.net/oqjgzsm0/273 . Imposta un nuovo intervallo che verifica se un clic è esterno all'ultimo iframe selezionato. Quindi reimposta l'intervallo originale per verificare nuovamente la presenza di clic. Non tiene traccia di più clic nello stesso iframe senza un clic all'esterno di esso.

— brouxhaha,

14

A parte il fatto che l'utilizzo di un intervallo di ciclo continuo a tale velocità non è una buona idea, questo rileverà falsi positivi se l'utente si concentra

— sull'iframe

36

Il seguente codice ti mostrerà se l'utente fa clic / passa il mouse o si sposta dall'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>

Devi sostituire src nell'iframe con il tuo link. Spero che questo ti aiuti. Saluti, Mo.

— Mohammed Radwan
fonte

1

Sulla base di test rapidi, l'esempio fornito (dopo aver corretto l'URL) sembra funzionare in IE 8, in modo abbastanza affidabile in Chrome 14.0.835.186 m, ma per niente in Firefox 6.0.2.

— Matthew Flaschen,

Funziona bene per Chrome, ma non funziona per Firefox v62, perché quando si fa clic sull'evento sfocatura iframe non viene generato

— slesh

11

Ho appena trovato questa soluzione ... L'ho provato, l'ho adorato ..

Funziona con iframe interdominio per desktop e dispositivi mobili!

Non so se è ancora infallibile

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

Buona codifica

— Tony
fonte

2

La stessa risposta (forse una versione leggermente migliore) è stata pubblicata un anno prima qui su questa stessa pagina: stackoverflow.com/a/23231136/470749

— Ryan,

5

È possibile ottenere ciò utilizzando l'evento sfocatura sull'elemento finestra.

Ecco un plug-in jQuery per tracciare i clic su iframe (attiverà una funzione di callback personalizzata quando si fa clic su un iframe): https://github.com/finalclap/iframeTracker-jquery

Usalo in questo modo:

jQuery(document).ready(function($){
    $('.iframe_wrap iframe').iframeTracker({
        blurCallback: function(){
            // Do something when iframe is clicked (like firing an XHR request)
        }
    });
});

— Vince
fonte

5

vedi http://jsfiddle.net/Lcy797h2/ per la mia soluzione a lungo termine che non funziona in modo affidabile in 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
fonte

È un fantastico programmatore ... quello che in realtà voglio ... + 1 a @Omar Jackman ... molto utile per catturare fare clic sulla pubblicità di YouTube

— saun4frsh

4

Questo funziona per me su tutti i browser (incluso 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>

Espandi frammento

<iframe id="idanmorblog" src="https://sidanmor.com/" style="width:400px;height:600px" ></iframe>

— sidanmor
fonte

3

Mohammed Radwan, la tua soluzione è elegante. Per rilevare i clic iframe in Firefox e IE, puoi utilizzare un metodo semplice con document.activeElement e un timer, tuttavia ... Ho cercato in tutti gli interwebs un metodo per rilevare i clic su un iframe in Chrome e Safari. Sul punto di arrendermi, trovo la tua risposta. Grazie Signore!

Alcuni consigli: ho trovato la tua soluzione più affidabile quando ho chiamato la funzione init () direttamente, piuttosto che tramite attachOnloadEvent (). Naturalmente per farlo, devi chiamare init () solo dopo l'ifml iframe. Quindi sarebbe simile a:

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

— zone117x
fonte

3

Puoi farlo per creare il bubble degli eventi nel documento principale:

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

Estendi l'elenco degli eventi per altri eventi.

— Taner Topal
fonte

Ho usato l'evento "touchend" e ha funzionato! La tua risposta mi ha aiutato molto!

3

Mi sono imbattuto in una situazione in cui ho dovuto tenere traccia dei clic su un pulsante di social media inserito in un iframe. Una nuova finestra si aprirà quando si fa clic sul pulsante. Ecco la mia soluzione:

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

— pizzarob
fonte

3

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

Basta creare un livello invisibile sopra l'iframe che torna indietro quando si fa clic e aumenta quando verrà generato l'evento con il mouse!
Ho bisogno di jQuery

questa soluzione non propagare il primo clic all'interno di 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>

Espandi frammento

— r1si
fonte

1

Questo funziona sicuramente se l'iframe proviene dallo stesso dominio del sito padre. Non l'ho testato per i siti tra domini.

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

Senza jQuery potresti provare qualcosa del genere, ma ancora una volta non ho provato questo.

window.frames['YouriFrameId'].onmousedown = function() { do something here }

Puoi anche filtrare i tuoi risultati:

$(window.frames['YouriFrameId']).mousedown(function(event){   
  var eventId = $(event.target).attr('id');      
  if (eventId == 'the-id-you-want') {
   //  do something
  }
});

— Jonathan Tonge
fonte

1

Combinando la risposta sopra con la possibilità di fare clic ancora e ancora senza fare clic su iframe esterno.

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

— Talha Asif
fonte

1

Siamo in grado di catturare tutti i clic. L'idea è di ripristinare lo stato attivo su un elemento esterno a iFrame dopo ogni clic:

    <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

— Alexandre Muraviov
fonte

0

Credo che tu possa fare qualcosa del tipo:

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

usando jQuery per raggiungere questo obiettivo.

— Daniel Sellers
fonte

0

Come trovato lì: Rileva Fare clic su Iframe utilizzando JavaScript

=> Possiamo usare 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');
    }
})

— Mickaël
fonte

0

Basandomi sulla risposta di Paul Draper, ho creato una soluzione che funziona continuamente quando si hanno Iframe che aprono altre schede nel browser. Quando si ritorna la pagina continua ad essere attiva per rilevare il clic sul framework, questa è una situazione molto comune:

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

Il codice è semplice, l'evento sfocatura rileva la perdita di messa a fuoco quando si fa clic sull'iframe e verifica se l'elemento attivo è l'iframe (se si dispone di più iframe, è possibile sapere chi è stato selezionato) questa situazione è frequente quando si hanno cornici pubblicitarie .

Il secondo evento attiva un metodo di attivazione quando torni alla pagina. viene utilizzato l'evento di modifica della visibilità.

— freedeveloper
fonte

0

Ecco la soluzione che usa gli approcci suggeriti con hover + blur e trucchi con gli elementi attivi, non con nessuna libreria, ma solo js. Funziona bene per FF / Chrome. Principalmente l'approvazione è la stessa proposta da @Mohammed Radwan, tranne per il fatto che uso un metodo diverso proposto da @ zone117x per tracciare il click iframe per FF, perché window.focus non funziona senza le impostazioni utente aggiuntive :

Invia una richiesta per portare la finestra in primo piano. Potrebbe non riuscire a causa delle impostazioni dell'utente e la finestra non è garantita per essere in primo piano prima che questo metodo ritorni.

Ecco il metodo composto:

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

— slesh
fonte

0

Ipotesi -

Lo script viene eseguito all'esterno dell'iframe MA NON nella finestra window.top più esterna. (Per la finestra più esterna, altre soluzioni di sfocatura sono abbastanza buone)
Viene aperta una nuova pagina che sostituisce la pagina corrente / una nuova pagina in una nuova scheda e il controllo passa alla nuova scheda.

Funziona sia con iframe generosi che senza codice

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

Se viene aperta una nuova scheda / la stessa pagina viene scaricata e il puntatore del mouse si trova all'interno dell'Iframe, viene considerato un clic

— Sahil Maniar
fonte