JavaScript kullanarak Iframe'e Tıklamayı Algılama

129

Alanlar arası ise kullanıcının ne yaptığını söylemenin mümkün olmadığını anlıyorum iframe. Ne yapmak istiyorsunuz kullanıcı tüm tıklanan eğer izlemek olduğunu iframe. divÜstünde görünmez olan bir senaryo hayal ediyorum iframeve divdaha sonra tıklama olayını iframe.

Böyle bir şey mümkün mü? Öyleyse, nasıl devam edeceğim? iframesReklamlar, bu yüzden kullanılan etiketlerin üzerinde hiçbir kontrole sahip.

— Russ Bradberry
kaynak

4

Mümkün ve

— çapraz tarayıcı

39

Böyle bir şey mümkün mü?

Hayır. Yapabileceğiniz tek şey, farenin iframe'e girdiğini algılamaktır ve potansiyel olarak (güvenilir olmasa da) geri çıktığında (yani, reklamın üzerinden başka bir yere giderken geçen işaretçi ile kalıcı olan arasındaki farkı çözmeye çalışmaktır. reklamda).

İframe'in üstünde görünmez bir div'in olduğu ve div'in tıklama olayını iframe'e ileteceği bir senaryo hayal ediyorum.

Hayır, bir tıklama olayını taklit etmenin bir yolu yoktur.

Fareyi yakalayarak, orijinal tıklamanın iframe'e ulaşmasını engellersiniz. Fare düğmesine ne zaman basılacağını belirleyebilseydiniz, görünmez div'i aradan çıkarmayı deneyebilirsiniz, böylece tıklama geçsin ... ancak fare düşürmeden hemen önce patlayan bir olay da yoktur.

Örneğin işaretçinin durup durmadığını görmek için bir tıklama gelmek üzere olduğunu tahmin ederek tahmin etmeye çalışabilirsiniz. Ancak bu tamamen güvenilmezdir ve başarısız olursanız, bir tıklamayı kaybetmiş olursunuz.

— bobince
kaynak

4

Evet öyle. Ve

— çapraz tarayıcı

1

Bu bağlantıları kontrol ettim ve cevabın doğru olduğunu düşünüyorum. Yalnızca iframe içindeki bir tıklama algılayabilir, tıklananları algılayamazsınız.

— user568021

Sadece tamamen doğru olmadığı için olumsuz oy verdim. Söylediklerinizin çoğu doğru, ancak bu ileti dizisindeki daha popüler yanıt gibi geçici çözümler var.

— newms87

155

Bu kesinlikle mümkündür. Bu, Chrome, Firefox ve IE 11'de (ve muhtemelen diğerlerinde) çalışır.

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

JSFiddle

Uyarı: Bu yalnızca ilk tıklamayı algılar. Anladığım kadarıyla tek istediğin bu.

— Paul Draper
kaynak

1

@the_joric, çünkü sorudan 4 yıl sonraydı ve insanlar normalde ilk çift cevaplarını geçmiyorlar.

— Paul Draper

3

Ayrıca, tarayıcı sekmelerini değiştirirseniz, odağı () ateşleyeceğini unutmayın;

— Linnay

7

Firefox'ta ÇALIŞMAZ. JSFiddle bunu gizleyen hata içeriyor: = === yerine.

— Çapraz tarayıcı

8

Kullanıcı önce ana belgeye tıklamazsa bulanıklık olayı tetiklenmez! Ayrıca, odak bir iframe'den diğerine değiştiğinde tetiklenen bir blurolay olmadığından (iframe'in olayı tetiklenmediğinden) bu, birden çok iframe'e yapılan tıklamaları algılamak için kullanılamaz .

— Tomáš Kafka

1

neden odaklanmaya bağımlılık var ();

— Prasad Shinde

108

Mohammed Radwan'ın cevabına dayanarak aşağıdaki jQuery çözümünü buldum. Temel olarak yaptığı şey, iFrame çalışanlarının neler yaptığını takip etmektir. Ardından, pencere bulanıklaşırsa bu, büyük olasılıkla kullanıcının iframe başlığını tıkladığı anlamına gelir.

iframe, kullanıcının hangi iframe'i tıkladığını bildiğinizden emin olmak için kimliğine sahip bir div içine yerleştirilmelidir:

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

yani:

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

... bu, hiçbir iFrame üzerine gelmediğinde overiFrame'i -1'de tutar veya bir iframe üzerine gelindiğinde sarmalayıcı div'de 'bannerid' ayarını tutar. Tek yapmanız gereken, pencere bulanıklaştığında 'overiFrame'in ayarlanıp ayarlanmadığını kontrol etmektir, örneğin: ...

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

Küçük bir dezavantajı olan çok şık bir çözüm: Bir kullanıcı fareyi bir iFrame'in üzerine getirirken ALT-F4'e basarsa, bunu bir tıklama olarak kaydeder. Bu yalnızca FireFox'ta oldu, ancak IE, Chrome ve Safari kaydetmedi.

Tekrar teşekkürler Mohammed, çok faydalı bir çözüm!

— patrick
kaynak

Bu yanıtı + 1'ledim, ancak aşağıdaki sorunlara neden oluyor: 1. Birden fazla iframe olduğunda, bunlardan birini, ardından hemen diğerini tıklarsınız - ikinci tıklama algılanmaz. 2. Bir iframe içindeki birden fazla tıklama da sayılmaz. 3. Mobil cihazlarda düzgün çalışmıyor çünkü parmağınızla "üzerine gelme" olayını yapamazsınız.

— Sych

Yukarıdaki komut dosyası, sitemden uzaktaki tıklamaları tespit etmek için tarafımdan kullanılıyor. Çoğu reklam ağı artık çerçevelerde afişler sunuyor. İlk tıklamadan ayrılmadan önce birini ve ardından hızlı bir şekilde diğerini tıklarsanız, teknik olarak gerçekte bıraktığınız son tıklamayı bilmek istiyorum. Yani benim durumumda bu istenen davranış. Mobil afişlerdeki tıklamaları da iyi tespit eder. Dolayısıyla, fareyle üzerine gelme, tıklama yürütülmeden hemen önce başlatılmalıdır

— Patrick

İframe içeriğinde svg öğeleri olması durumunda çalışmıyor :( stackoverflow.com/questions/32589735/…

— Serhiy

@Serhiy, çünkü iframe'e tıkladığınızda orijinal sayfadan çıkmıyorsunuz ...

— Patrick

6

Bu cevap, en iyisidir, ancak, iframe'e her tıklamayı almak istiyorsanız, daha fazla tıklamayı izlemek için kullanıcı tıkladıktan sonra odaklanmanız gerekir . Bu $ (pencere) .blur () bölümüne eklenmelidir: setTimeout(function(){ window.focus(); }, 0);. Artık kullanıcı tıklar, odağı iframe'e koyar, komut dosyası o odağı geri çeker ve artık gelecekteki tıklamalardan sonraki odak değişikliklerini izleyebilir.

— HelpingHand

89

Bu, IE8 dahil tüm tarayıcılarda çalışan küçük bir çözümdür:

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

Burada test edebilirsiniz: http://jsfiddle.net/oqjgzsm0/

— Dmitry Kochin
kaynak

1

Ya birkaç iframe'iniz varsa ve bunların kimliğini bilmiyorsanız?

— shankshera

1

en son FF'de de çalışan tek tarayıcılar arası güvenilir çözüm! Çok teşekkürler. Daha fazla oyu hak ediyor

— BrainOverflow

6

@shankshera Sadece elem.id'i alın, bu sizin iframe kimliğiniz :). Bkz. Jsfiddle.net/oqjgzsm0/219

— Tomáš Kafka

1

Bunu sosyal benzeri düğmelerdeki tıklamaları izlemek için kullanıyorum. Ancak, kullandığımların 3 / 4'ü iframe kullandığından, tıklamaları birden çok iframe'de izlemem gerekiyor. Buna izin vermek için keman'ı güncelledim: jsfiddle.net/oqjgzsm0/273 . Bir tıklamanın son tıklanan iframe'in dışında olup olmadığını kontrol eden yeni bir aralık ayarlar. Ardından, tıklamaları tekrar kontrol etmek için orijinal aralığı sıfırlar. Dışında bir tıklama olmadan aynı iframe içindeki birden fazla tıklamayı izlemez.

— brouxhaha

14

Böyle bir hızda sürekli döngü aralığı kullanmanın pek iyi bir fikir olmadığı gerçeğinin yanı sıra, kullanıcı sekme tuşu gezintisi yoluyla iframe'e odaklanırsa bu yanlış pozitifleri tespit edecektir

— Kaiido

36

Aşağıdaki kod, kullanıcının iframe'i tıklayıp / fareyle üzerine gelip gelmediğini veya iframe'in dışına çıkıp çıkmadığını gösterir:

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

İframe'deki src'yi kendi bağlantınızla değiştirmeniz gerekir. Umarım bu yardımcı olur. Saygılarımızla, Mo.

— Muhammed Radwan
kaynak

1

Hızlı teste dayanarak, verilen örnek (URL'yi düzelttikten sonra) IE 8'de, Chrome 14.0.835.186 m'de biraz güvenilir bir şekilde çalışıyor gibi görünüyor, ancak Firefox 6.0.2'de hiç çalışmıyor.

— Matthew Flaschen

Chrome için iyi çalışıyor, ancak Firefox v62 için çalışmıyor, çünkü iframe tıklandığında bulanıklık olayı

— atılmıyor

11

Sadece bu çözümü buldum ... Denedim, sevdim ..

Masaüstü ve mobil için etki alanları arası iframe'ler için çalışır!

Henüz kusursuz olup olmadığını bilmiyorum

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

Mutlu kodlama

— Tony
kaynak

2

Aynı yanıt (belki biraz daha iyi bir versiyon) bir yıl önce aynı sayfada yayınlandı: stackoverflow.com/a/23231136/470749

— Ryan

5

Bunu, pencere öğesindeki bulanıklaştırma olayını kullanarak başarabilirsiniz.

İşte iframe tıklamalarını izlemek için bir jQuery eklentisi (bir iframe tıklandığında özel bir geri arama işlevini tetikler): https://github.com/finalclap/iframeTracker-jquery

Bunu şu şekilde kullanın:

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

— Vince
kaynak

5

IE'de güvenilir şekilde çalışmayan uzun soluklu çözümüm için bkz. http://jsfiddle.net/Lcy797h2/

        $(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
kaynak

Müthiş kodlayıcı adam .... aslında istediğim şey ... + 1'den @Omar Jackman'a .. youtube reklamına tıklamak için çok yararlı

— saun4frsh

4

Bu benim için tüm tarayıcılarda çalışıyor (Firefox dahil)

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>

Snippet'i genişlet

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

— sidanmor
kaynak

3

Mohammed Radwan, Çözümünüz zarif. Firefox ve IE'de iframe tıklamalarını tespit etmek için, document.activeElement ve bir zamanlayıcı ile basit bir yöntem kullanabilirsiniz, ancak ... Chrome ve Safari'de bir iframe üzerindeki tıklamaları tespit etmek için bir yöntem için web sitelerinin her yerinde arama yaptım. Vazgeçmenin eşiğinde, cevabını buluyorum. Teşekkürler bayım!

Bazı ipuçları: attachOnloadEvent () yerine doğrudan init () işlevini çağırırken çözümünüzün daha güvenilir olduğunu buldum. Elbette bunu yapmak için, init () i yalnızca iframe html'den sonra çağırmalısınız. Yani şöyle bir şeye benzeyecektir:

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

3

Etkinlikleri ana belgeye dönüştürmek için bunu yapabilirsiniz:

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

Daha fazla etkinlik için etkinlik listesini genişletmeniz yeterli.

— Taner Topal
kaynak

"Touchend" etkinliğini kullandım ve işe yaradı! Cevabınız bana çok yardımcı oldu!

3

Bir iframe aracılığıyla çekilen bir sosyal medya düğmesine yapılan tıklamaları izlemem gereken bir durumla karşılaştım. Düğme tıklandığında yeni bir pencere açılacaktı. İşte benim çözümüm:

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
kaynak

3

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

Sadece iframe üzerinde, tıklandığında geri dönen ve mouseleave olayı tetiklendiğinde yukarı çıkan görünmez bir katman oluşturun !!
JQuery'ye ihtiyacınız var

bu çözüm, iframe içinde ilk tıklamayı yaymaz!

$("#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>

Snippet'i genişlet

— r1si
kaynak

1

Bu, iframe ana sitenizle aynı alandaysa kesinlikle işe yarar. Etki alanları arası siteler için test etmedim.

$(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 olmadan bunun gibi bir şey deneyebilirsiniz, ancak yine de bunu denemedim.

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

Hatta sonuçlarınızı filtreleyebilirsiniz:

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

— Jonathan Tonge
kaynak

1

Yukarıdaki cevabı iframe dışına tıklamadan tekrar tekrar tıklama yeteneği ile birleştirmek.

    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
kaynak

1

Tüm tıklamaları yakalayabiliriz. Buradaki fikir, her tıklamadan sonra iFrame dışındaki bir öğeye odaklanmayı sıfırlamaktır:

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

0

Şuna benzer bir şey yapabileceğine inanıyorum:

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

Bunu gerçekleştirmek için jQuery kullanarak.

— Daniel Sellers
kaynak

0

Burada olduğu gibi: JavaScript kullanarak Iframe'e Tıklamayı Algılama

=> İframeTracker-jquery kullanabiliriz :

$('.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
kaynak

0

Paul Draper'ın cevabına dayanarak, tarayıcıda başka bir sekme açan Iframe'leriniz olduğunda sürekli çalışan bir çözüm yarattım. Döndüğünüzde, çerçeve üzerindeki tıklamayı tespit etmek için sayfayı aktif olmaya devam edin, bu çok yaygın bir durumdur:

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

Kod basittir, bulanıklık olayı, iframe tıklandığında odak kaybını algılar ve aktif öğenin iframe olup olmadığını test edin (birkaç iframe'iniz varsa kimin seçildiğini bilebilirsiniz) bu durum genellikle tanıtım çerçeveleriniz olduğunda ortaya çıkar .

İkinci olay, sayfaya döndüğünüzde bir odak yöntemini tetikler. görünürlük değişikliği olayında kullanılır.

— freedeveloper
kaynak

0

Burada, fareyle üzerine gelme + bulanıklığı ve aktif öğe hileleri ile önerilen yaklaşımları kullanan çözüm, herhangi bir kitaplık değil, yalnızca saf js. FF / Chrome için iyi çalışıyor. Çoğunlukla yaklaşım @Mohammed Radwan'ın önerdiği ile aynıdır, ancak @ zone117x tarafından FF için iframe tıklamasını izlemek için önerilen farklı bir yöntem kullanıyorum, çünkü window.focus ek kullanıcı ayarları olmadan çalışmıyor :

Pencereyi öne getirmek için istekte bulunur. Kullanıcı ayarları nedeniyle başarısız olabilir ve bu yöntem geri dönmeden önce pencerenin en önde olacağı garanti edilmez.

İşte bileşik yöntem:

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
kaynak

0

Varsayımlar -

Komut dosyanız iframe dışında çalışır ANCAK en dıştaki window.top penceresinde DEĞİL. (En dıştaki pencere için, diğer bulanıklaştırma çözümleri yeterince iyidir)
Yeni sekmede mevcut sayfanın / yeni sayfanın yerine yeni bir sayfa açılır ve kontrol yeni sekmeye geçer.

Bu, hem kaynak içeren hem de kaynaksız iframe'ler için işe yarar

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

Yeni bir sekme açılırsa / aynı sayfa kaldırılırsa ve fare imleci Iframe içindeyse, tıklama olarak kabul edilir

— Sahil Maniar
kaynak