जावास्क्रिप्ट का उपयोग करके आइफ्रेम में क्लिक का पता लगाएं

Question

मैं समझता हूं कि iframeअगर यह क्रॉस डोमेन है तो उपयोगकर्ता यह नहीं बता सकता कि अंदर क्या हो रहा है। यदि उपयोगकर्ता उपयोगकर्ता पर क्लिक करता है तो मैं क्या करना चाहूंगा iframe। मैं एक ऐसे परिदृश्य की कल्पना करता हूं, जहां divशीर्ष पर एक अदृश्य हो iframeऔर divइच्छाशक्ति तब क्लिक इवेंट को पास कर दे iframe।

क्या ऐसा कुछ संभव है? अगर यह है, तो मैं इसके बारे में कैसे जाऊंगा? iframesविज्ञापन कर रहे हैं, इसलिए मैं टैग कि उपयोग किया जाता है पर कोई नियंत्रण नहीं।

Comments

यह संभव है और क्रॉसबोवर समाधान है: stackoverflow.com/a/32138108/1064513

— दिमित्री कोचीन

Answer 1

क्या ऐसा कुछ संभव है?

नहीं। आप यह कर सकते हैं कि आइफ्रेम में जाने वाले माउस का पता लगाया जा सकता है, और संभावित रूप से (हालांकि मज़बूती से नहीं) जब वह बाहर निकलता है (यानी, विज्ञापन के रास्ते में आने वाले पॉइंटर के बीच के अंतर को काम करने की कोशिश करता है, तो कहीं और बनाम लिंगरिंग। विज्ञापन पर)।

मैं एक ऐसे परिदृश्य की कल्पना करता हूँ जहाँ iframe के ऊपर एक अदृश्य div है और div तब iframe पर क्लिक ईवेंट को पास करेगा।

नहीं, एक क्लिक ईवेंट को नकली करने का कोई तरीका नहीं है।

मूसडाउन को पकड़कर आप मूल क्लिक को आइफ्रेम होने से रोकेंगे। यदि आप निर्धारित कर सकते हैं कि माउस बटन कब दबाया जाने वाला था, तो आप अदृश्य div को रास्ते से हटाने की कोशिश कर सकते थे ताकि क्लिक से गुजर जाए ... लेकिन ऐसी कोई घटना नहीं है जो मूसडाउन से ठीक पहले फायर करती हो।

आप अनुमान लगाने की कोशिश कर सकते हैं, उदाहरण के लिए यह देखने के लिए कि क्या सूचक आराम करने के लिए आया है, अनुमान लगाने पर एक क्लिक आने वाला है। लेकिन यह पूरी तरह से अविश्वसनीय है, और यदि आप असफल हो जाते हैं तो आपने खुद को एक क्लिक-थ्रू खो दिया है।

Comments

हाँ यही है। और वहाँ क्रॉसब्रोसर समाधान है: stackoverflow.com/a/32138108/1064513

— दिमित्री कोचीन

मैंने इन लिंक की जाँच की और मुझे लगता है कि उत्तर सही है। आप केवल iframe के अंदर एक क्लिक का पता लगा सकते हैं लेकिन क्लिक नहीं किया गया था।

— user568021

मैं नीचा दिखाता हूं, केवल इसलिए कि यह पूरी तरह सच नहीं है। आप जो कह रहे हैं, उनमें से अधिकांश सच है, लेकिन इस थ्रेड पर अधिक लोकप्रिय जवाब के रूप में वर्कअराउंड हैं।

— newms87

Answer 2

यह निश्चित रूप से संभव है। यह क्रोम, फ़ायरफ़ॉक्स और IE 11 (और शायद अन्य) में काम करता है।

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

JSFiddle

---

कैविएट: यह केवल पहले क्लिक का पता लगाता है। जैसा कि मैं समझता हूं, वह सब आप चाहते हैं।

Comments

@the_joric, यह इसलिए है क्योंकि यह प्रश्न के 4 साल बाद था, और लोग आम तौर पर पहले युगल उत्तरों को स्क्रॉल नहीं करते हैं।

— पॉल ड्रेपर

यह भी ध्यान दें कि यदि आप ब्राउज़र टैब बदलते हैं तो यह फ़ोकस () को आग देगा;

— लिनै

यह फ़ायरफ़ॉक्स में काम नहीं करता है। JSFiddle में वह गलती है जो इसे छिपाती है: === के बजाय। वहाँ crossbrowser समाधान (IE8 में भी) है: stackoverflow.com/a/32138108/1064513

— दिमित्री कोचीन

यदि उपयोगकर्ता मुख्य दस्तावेज़ में पहले क्लिक नहीं करता है तो धमाके की घटना में आग नहीं लगती है! इसके अलावा, यह कई iframes पर क्लिकों का पता लगाने के लिए उपयोग करने योग्य नहीं है, क्योंकि कोई घटना नहीं है जो आग लगाती है जब फोकस एक iframe से दूसरे में बदलता है (iframe की blurघटना में आग नहीं लगती है)।

— तोमा काफ्का

फोकस पर निर्भरता क्यों है ();

— प्रसाद शिंदे

Answer 3

मोहम्मद राडवान के जवाब के आधार पर मैं निम्नलिखित jQuery समाधान के साथ आया। मूल रूप से यह क्या करता है क्या iFrame लोग मँडरा रहे हैं का ट्रैक रखता है। फिर अगर विंडो में दोष है कि सबसे अधिक संभावना है कि उपयोगकर्ता ने iframe बैनर पर क्लिक किया है।

iframe को id के साथ div में रखा जाना चाहिए, यह सुनिश्चित करने के लिए कि आपको पता है कि उपयोगकर्ता किस iframe पर क्लिक करता है:

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

... यह कोई भी iFrames hovered हैं, या एक iframe hovered है जब रैपिंग div में सेट 'बेनरिड' सेट पर overiFrame रहता है। आपको बस इतना देखना है कि अगर 'ब्लीडर' सेट किया जाता है तो विंडो ब्लर होती है, जैसे: ...

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

एक मामूली नकारात्मक पहलू के साथ बहुत ही सुंदर समाधान: यदि कोई उपयोगकर्ता ALT-F4 दबाता है, जब iFrame पर माउस को मँडराता है, तो वह इसे एक क्लिक के रूप में लॉग करेगा। यह केवल फ़ायर्फ़ॉक्स में हुआ, हालांकि, IE, क्रोम और सफारी ने इसे पंजीकृत नहीं किया।

धन्यवाद फिर से मोहम्मद, बहुत उपयोगी समाधान!

Comments

मेरे पास इसका उत्तर + 1-ed है, हालाँकि, इसके निम्न मुद्दे हैं: 1. जब कई iframes होते हैं, तो आप उनमें से एक पर क्लिक करते हैं, फिर तुरंत दूसरे पर - दूसरे क्लिक का पता नहीं चलता है। 2. एक आइफ्रेम के अंदर कई क्लिक भी नहीं गिने जाते हैं। 3. मोबाइल पर सही ढंग से काम नहीं करता है, क्योंकि आप उंगली से "हॉवर" घटना नहीं कर सकते।

— साइक

उपरोक्त स्क्रिप्ट का उपयोग मेरे द्वारा मेरी साइट से क्लिकों का पता लगाने के लिए किया जाता है। अधिकांश विज्ञापन नेटवर्क अब फ़्रेम में बैनर परोसते हैं। यदि आप पहले क्लिक पर निकलने से पहले एक क्लिक करते हैं और फिर एक और तेजी से करते हैं, तो तकनीकी रूप से मैं अंतिम क्लिक जानना चाहता हूं जो आपने वास्तव में छोड़ा था। तो मेरे मामले में यह व्यवहार चाहता है। यह मोबाइल बैनरों पर भी अच्छी तरह से क्लिक करने का पता लगाता है। तो क्लिक करने से ठीक पहले होवर को लॉन्च किया जाना चाहिए

— patrick

Iframe सामग्री में svg तत्वों के मामले में काम नहीं करना :( stackoverflow.com/questions/32589735/…

— Serhiy

@Serhiy, ऐसा इसलिए है क्योंकि आप वास्तव में iframe पर क्लिक करने पर मूल पृष्ठ से बाहर नहीं निकल रहे हैं ...

— patrick

यह उत्तर उनमें से सबसे अच्छा है, हालांकि, यदि आप iframe में प्रत्येक क्लिक प्राप्त करना चाहते हैं, तो उपयोगकर्ता द्वारा आगे क्लिकों की निगरानी करने के लिए उपयोगकर्ता द्वारा क्लिक किए जाने के बाद आपको इसका ध्यान केंद्रित करना होगा । इसे $ (विंडो) .blur () अनुभाग में जोड़ा जाना चाहिए setTimeout(function(){ window.focus(); }, 0);:। अब, उपयोगकर्ता क्लिक करता है, iframe में फ़ोकस डालता है, स्क्रिप्ट उस फ़ोकस को वापस खींचती है, और अब भविष्य के क्लिक्स से फ़ोकस परिवर्तन पर नज़र रख सकता है।

— हेलिंगिंगहैंड

Answer 4

यह एक छोटा सा समाधान है जो IE8 में भी सभी ब्राउज़रों में काम करता है:

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

आप इसे यहाँ देख सकते हैं: http://jsfiddle.net/oqjgzsm0/

Comments

क्या होगा यदि आपके पास कई iframes हैं और आप उनकी आईडी नहीं जानते हैं?

— शंखशेरा

केवल क्रॉस-ब्राउज़र विश्वसनीय समाधान जो नवीनतम एफएफ में भी काम करता है! बहुत बहुत धन्यवाद। यह अधिक उत्थान के लायक है

— ब्रेनऑवरफ्लो

@shankshera बस elem.id प्राप्त करें, यह आपकी iframe id है :)। देखें jsfiddle.net/oqjgzsm0/219

— टॉमस काफ्का

मैं बटन जैसे सामाजिक पर क्लिक को ट्रैक करने के लिए इसका उपयोग कर रहा हूं। लेकिन क्योंकि मैं उपयोग कर रहा हूँ 3/4 iframes का उपयोग कर रहा हूँ, मुझे कई iframes में क्लिक ट्रैक करने की आवश्यकता है। मैंने उसके लिए अनुमति देने के लिए फिडेल को अपडेट किया है: jsfiddle.net/oqjgzsm0/273 । यह एक नया अंतराल सेट करता है जो यह देखने के लिए जांचता है कि क्या एक क्लिक अंतिम आइफ्रेम के बाहर है। फिर क्लिक के लिए फिर से जाँच करने के लिए मूल अंतराल को रीसेट करता है। यह एक क्लिक के बिना एक ही iframe में कई क्लिकों को ट्रैक नहीं करता है।

— ब्रूक्साहा

इस तथ्य के अलावा कि इस तरह की दर पर लगातार लूपिंग अंतराल का उपयोग करना बहुत अच्छा विचार नहीं है, यह गलत सकारात्मकता का पता लगाएगा यदि उपयोगकर्ता टैब कुंजी नेविगेशन के माध्यम से iframe पर ध्यान केंद्रित करता है

— काइदो

Answer 5

निम्नलिखित कोड आपको दिखाएगा कि उपयोगकर्ता क्लिक करता है / होवर या 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>

आपको अपने स्वयं के लिंक के साथ iframe में src को बदलना होगा। आशा है कि यह मदद करेगा। सादर, मो।

Comments

त्वरित परीक्षण के आधार पर, दिए गए उदाहरण (URL को ठीक करने के बाद) IE 8 में काम करने लगता है, क्रोम में कुछ हद तक मज़बूती से 14.0.835.186 मीटर है, लेकिन फ़ायरफ़ॉक्स 6.0.2 में बिल्कुल भी नहीं।

— मैथ्यू फ्लशेन

क्रोम के लिए ठीक काम करता है, लेकिन फ़ायरफ़ॉक्स v62 के लिए काम नहीं करता है, क्योंकि जब iframe कलंक घटना पर क्लिक नहीं किया जाता है

— slesh

Answer 6

बस यह समाधान मिला ... मैंने इसे आज़माया, मुझे बहुत अच्छा लगा ..

डेस्कटॉप और मोबाइल के लिए क्रॉस डोमेन iframes के लिए काम करता है!

नहीं पता है कि यह अभी तक मूर्ख है

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

खुश कोडिंग

Comments

इस एक ही उत्तर (शायद थोड़ा बेहतर संस्करण) को इस पृष्ठ पर एक साल पहले यहां पोस्ट किया गया था: stackoverflow.com/a/23231136/470749

— रयान

Answer 7

आप विंडो तत्व पर ब्लर ईवेंट का उपयोग करके इसे प्राप्त कर सकते हैं।

यहाँ iframes पर क्लिक करने के लिए एक jQuery प्लगइन है (यह एक 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)
        }
    });
});

Answer 8

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

Comments

इसका जबरदस्त कोडिंग मैन .... वास्तव में मुझे क्या चाहिए ... + 1 से @ ओमर जैकमैन .. यूट्यूब विज्ञापन पर क्लिक करने के लिए इतना मददगार है

— saun4frsh

Answer 9

यह मेरे लिए सभी ब्राउज़रों पर काम करता है (फ़ायरफ़ॉक्स शामिल है)

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>

Answer 10

मोहम्मद रदवान, आपका समाधान सुरुचिपूर्ण है। फ़ायरफ़ॉक्स और IE में iframe क्लिक का पता लगाने के लिए, आप document.activeElement और टाइमर के साथ एक सरल विधि का उपयोग कर सकते हैं, हालांकि ... मैंने क्रोम और सफारी में एक iframe पर क्लिक का पता लगाने के लिए एक विधि के लिए सभी इंटरवेब पर खोज की है। देने के कगार पर, मुझे आपका जवाब मिल गया। धन्यवाद महोदय!

कुछ सुझाव: मैंने आपके समाधान को अधिक विश्वसनीय होने के लिए ढूंढा है जब इनऑनऑनऑनवेट () के बजाय सीधे इनिट () फ़ंक्शन को कॉल करते हैं। ऐसा करने के लिए, आपको iframe html के बाद ही init () को कॉल करना होगा। तो यह कुछ इस तरह दिखेगा:

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

Answer 11

आप पैरेंट डॉक्यूमेंट को बबल इवेंट्स के लिए कर सकते हैं:

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

अधिक घटनाओं के लिए बस इवेंटलिस्ट का विस्तार करें।

Comments

मैंने 'टचेंड' इवेंट का इस्तेमाल किया और यह काम कर गया! आपके जवाब से मुझे बहुत मदद मिली!

Answer 12

मैं एक ऐसी स्थिति में भाग गया, जहाँ मुझे एक 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();

Answer 13

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>

Answer 14

यह निश्चित रूप से काम करता है यदि 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
  }
});

Answer 15

ऊपर के उत्तर को फिर से क्लिक करने की क्षमता के साथ संयोजन के बिना बाहर 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 );
    });

Answer 16

हम सभी क्लिकों को पकड़ सकते हैं। यह विचार प्रत्येक क्लिक के बाद 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

Answer 17

मेरा मानना ​​है कि आप कुछ ऐसा कर सकते हैं:

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

इसे पूरा करने के लिए jQuery का उपयोग करना।

Answer 18

जैसा कि वहां पाया गया: जावास्क्रिप्ट का उपयोग करके आइफ्रेम में क्लिक का पता लगाएं

=> हम 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');
    }
})

Answer 19

पॉल ड्रेपर के जवाब के आधार पर, मैंने एक समाधान बनाया जो आपके पास लगातार काम करता है जब आपके पास इफ्रेम होता है जो ब्राउज़र में अन्य टैब खोलता है। जब आप पृष्ठ पर लौटते हैं तो रूपरेखा पर क्लिक का पता लगाने के लिए सक्रिय रहना जारी है, यह एक बहुत ही सामान्य स्थिति है:

          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 हैं जिन्हें आप जान सकते हैं कि कौन चुना गया था) यह स्थिति अक्सर होती है जब आपके पास सार्वजनिक फ़्रेम होते हैं ।

जब आप पृष्ठ पर वापस आते हैं तो दूसरी घटना एक फोकस विधि को ट्रिगर करती है। यह दृश्यता परिवर्तन घटना का उपयोग किया जाता है।

Answer 20

होवर + ब्लर और सक्रिय तत्व ट्रिक्स के साथ सुझाए गए दृष्टिकोणों का उपयोग करके यहां समाधान है, न कि कोई लाइब्रेरी, सिर्फ शुद्ध जेएस। एफएफ / क्रोम के लिए ठीक काम करता है। अधिकतर अनुमोदन @ मोहम्मद राडवान के रूप में प्रस्तावित है, सिवाय इसके कि मैं FF के लिए iframe पर नज़र रखने के लिए @ Zone117x द्वारा प्रस्तावित अलग-अलग विधि का उपयोग करता हूं, क्योंकि 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;
            });
    }
}

Answer 21

मान्यताओं -

1. आपकी स्क्रिप्ट iframe BUT NOT के बाहर सबसे बाहरी window.top विंडो में चलती है। (सबसे बाहरी खिड़की के लिए, अन्य धब्बा समाधान काफी अच्छे हैं)
2. एक नया पेज चालू पेज की जगह एक नया पेज खोला जाता है और एक नया पेज नए टैब में बदल दिया जाता है।

यह दोनों के लिए काम करता sourceful और sourceless iframes

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

यदि एक नया टैब खोला जाता है / एक ही पेज अनलोड होता है और माउस पॉइंटर इफ्रेम के भीतर होता है, तो एक क्लिक माना जाता है