জাভাস্ক্রিপ্ট ব্যবহার করে Iframe এ ক্লিক করুন সনাক্ত করুন

128

আমি বুঝতে পারি যে এটি iframeক্রস ডোমেন হলে ব্যবহারকারী ভিতরে কী করছে তা বলা সম্ভব নয় । আমি কী করতে চাই তা হ'ল যদি ব্যবহারকারীরা একেবারে ক্লিক করে iframe। আমি এমন একটি দৃশ্যের কল্পনা করি যেখানে divশীর্ষে কোনও অদৃশ্য থাকে iframeএবং divউইলটি তারপরে ক্লিক ইভেন্টটি পাস করুন iframe।

এই সম্ভব ভালো কিছু হয়? যদি তা হয় তবে আমি কীভাবে এটি সম্পর্কে যাব? iframesবিজ্ঞাপন আছে, তাই আমি ট্যাগ ব্যবহার করা উপর কোন নিয়ন্ত্রণ আছে।

— রাশ ব্র্যাডবেরি
সূত্র

4

: এটা সম্ভব এবং সেখানে crossbrowser সমাধান stackoverflow.com/a/32138108/1064513

— দিমিত্রি Kochin

39

এই সম্ভব ভালো কিছু হয়?

না। আপনি যা করতে পারেন তা হ'ল ইফ্রেমে যাচ্ছেন এবং সম্ভাব্যভাবে (যদিও নির্ভরযোগ্যভাবে নয়) যখন এটি ফিরে আসে (অর্থাত্ বিজ্ঞাপনটি পয়েন্টারটির মধ্য দিয়ে যাওয়ার পথে পার্থক্যটি অন্য কোথাও স্থির করার চেষ্টা করে) বিজ্ঞাপনে)।

আমি এমন একটি দৃশ্যের কল্পনা করি যেখানে ইফ্রেমের শীর্ষে একটি অদৃশ্য ডিভ থাকে এবং ডিভটি কেবল ক্লিক ইভেন্টটি আইফ্রেমে পাস করবে।

নাহ, ক্লিক ইভেন্ট জাল করার উপায় নেই।

মাউসডাউনটি ধরে আপনি মূল ক্লিকটি iframe থেকে আসা থেকে আটকাতে পারবেন। আপনি যদি নির্ধারণ করতে পারতেন কখন মাউস বোতামটি টিপতে চলেছে আপনি অদৃশ্য ডিভটি বের করার চেষ্টা করতে পারেন যাতে ক্লিকটি যেতে পারে ... তবে মোসাউনের ঠিক আগে আগুন ছড়িয়ে যাওয়ার কোনও ঘটনা নেই।

আপনি অনুমান করার চেষ্টা করতে পারেন, উদাহরণস্বরূপ, পয়েন্টারটি বিশ্রাম পেয়েছে কিনা তা দেখে খোঁজ নিয়ে, একটি ক্লিক আসতে পারে ess তবে এটি সম্পূর্ণ অবিশ্বাস্য এবং আপনি যদি ব্যর্থ হন তবে আপনি কেবল একটি ক্লিক-মাধ্যমে নিজেকে হারিয়ে ফেলেছেন।

— bobince
সূত্র

4

হ্যাঁ, তাই : আর crossbrowser সমাধান stackoverflow.com/a/32138108/1064513

— দিমিত্রি Kochin

1

আমি এই লিঙ্কগুলি পরীক্ষা করেছিলাম এবং আমার মনে হয় উত্তরটি সঠিক। আপনি কেবল iframe এর ভিতরে একটি ক্লিক সনাক্ত করতে পারেন তবে যা ক্লিক করা হয়েছিল তা নয়।

— ব্যবহারকারী568021

আমি হ্রাস পেয়েছি, কেবল কারণ এটি সম্পূর্ণ সত্য নয়। আপনি যা বলছেন তার বেশিরভাগই সত্য, তবে এই থ্রেডে আরও জনপ্রিয় উত্তর হিসাবে কার্যকারিতা রয়েছে।

— newms87

154

এটা অবশ্যই সম্ভব। এটি ক্রোম, ফায়ারফক্স এবং আইই ১১ (এবং সম্ভবত অন্যরা) তে কাজ করে।

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

JSFiddle

ক্যাভেট: এটি কেবল প্রথম ক্লিকটি সনাক্ত করে। আমি যেমন বুঝতে পেরেছি, আপনি কেবল এটিই চান।

— পল ড্রাগার
সূত্র

1

@ যেজোরিক, কারণ এটি প্রশ্নের 4 বছর পরে ছিল এবং লোকেরা সাধারণত প্রথম দম্পতির উত্তরগুলি আগে স্ক্রোল করে না।

— পল ড্রাগার

3

এছাড়াও লক্ষণীয় যে আপনি যদি ব্রাউজারের ট্যাবগুলি পরিবর্তন করেন তবে এটি ফোকাসটিকে আগুন ধরিয়ে দেবে ();

— লিনে

7

এটি ফায়ারফক্সে কাজ করে না। জেএসফিডেলে এমন ভুল রয়েছে যা এটিকে গোপন করে: = === এর পরিবর্তে। আছে: crossbrowser সমাধান (IE8 এমনকি) হল stackoverflow.com/a/32138108/1064513

— দিমিত্রি Kochin

8

প্রথমে প্রধান দস্তাবেজে ব্যবহারকারী ক্লিক না করলে অস্পষ্ট ঘটনাটি আগুন ধরে না! এছাড়াও, একাধিক আইফ্রেমে ক্লিকগুলি সনাক্তকরণের জন্য এটি ব্যবহারযোগ্য নয়, কারণ একটি আইফ্রাম থেকে অন্য আইফ্রেমে ফোকাস পরিবর্তিত হলে ( blurআগুনের ইভেন্টটি আগুন দেয় না) আগুন জ্বলানোর কোনও ঘটনা নেই।

— টমো কাফকা

1

কেন ফোকাস উপর নির্ভরতা আছে ();

— প্রসাদ শিন্দে

107

মোহাম্মদ রাদওয়ানের উত্তরের উপর ভিত্তি করে আমি নিম্নলিখিত jQuery সমাধান নিয়ে এসেছি। মূলত এটি যা করে তা হ'ল আইফ্রেম লোকেরা কী ঘুরে বেড়াচ্ছে তা ট্র্যাক করা। তারপরে যদি উইন্ডোটি অস্পষ্ট হয় তবে সম্ভবত এটি ব্যবহারকারীর আইফ্রেমে ব্যানারটি ক্লিক করে।

আইফ্রেমে আইডির সাথে ডিভিতে রাখা উচিত, ব্যবহারকারীরা কোন আইফ্রেমে ক্লিক করেছেন তা আপনি নিশ্চিত তা নিশ্চিত করতে:

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

... যখন কোনও আইফ্রেম আড়াল করা হয় না, বা আইফ্রেমে আটকানো হয় তখন মোড়ক ডিভিতে 'ব্যানারিড' সেট থাকে এটি -1 এ অতিরিক্ত ফ্রেম রাখে। উইন্ডোটি অস্পষ্ট হয়ে গেলে 'ওভারফ্রেম' সেট করা আছে কিনা তা যাচাই করে আপনাকে যা করতে হবে: ...

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

একটি ছোটখাটো ডাউনসাইড সহ খুব মার্জিত সমাধান: কোনও ব্যবহারকারী যদি আইফ্রেমের উপর মাউস ঘোরাতে গিয়ে ALT-F4 টিপেন তবে এটি ক্লিক হিসাবে এটি লগ ইন করবে। এটি কেবল ফায়ারফক্সে ঘটেছিল, যদিও, আই, ক্রোম এবং সাফারি এটি রেজিস্টার করেনি।

আবারও ধন্যবাদ মহম্মদ, খুব দরকারী সমাধান!

— প্যাট্রিক
সূত্র

আমি এই উত্তরটি +1-এড করেছি, যদিও এর নিম্নোক্ত বিষয়গুলি রয়েছে: ১. যখন একাধিক আইফ্রেমে থাকে, আপনি তাদের একটিতে ক্লিক করুন, তারপরে তত্ক্ষণাত্ অন্যটিতে - দ্বিতীয় ক্লিকটি সনাক্ত করা যায় না। ২.এফ্রেমের ভিতরে একাধিক ক্লিক খুব বেশি গণনা করা হয় না। ৩. মোবাইলে সঠিকভাবে কাজ করে না, কারণ আপনি আঙুল দিয়ে "হোভার" ইভেন্টটি করতে পারবেন না।

— Sych

উপরের লিপিটি আমার সাইট থেকে দূরে ক্লিকগুলি সনাক্ত করতে আমার দ্বারা ব্যবহৃত হয়। বেশিরভাগ বিজ্ঞাপনের নেটওয়ার্কগুলি এখন ফ্রেমে ব্যানার পরিবেশন করে। আপনি যদি প্রথম ক্লিকে চলে যাওয়ার আগে আপনি একটিতে ক্লিক করেন এবং তারপরে দ্রুত অন্য কোনওটিকে, প্রযুক্তিগতভাবে আপনি শেষ ক্লিকটি জানতে চান যা আপনি আসলে রেখেছিলেন। সুতরাং আমার ক্ষেত্রে এটি আচরণ চেয়েছিল। এটি মোবাইল ব্যানারগুলিতে খুব ভাল সনাক্তকরণের ক্লিকগুলি করে। সুতরাং

— ক্লিকটি

আইফ্রেমে সামগ্রীগুলিতে এসভিজি উপাদানগুলির ক্ষেত্রে কাজ করছেন না :( স্ট্যাকওভারফ্লো.com

— সেরিহি

@ সেরিহ, কারণ ইফ্রেমে ক্লিক করার সময় আপনি আসল পৃষ্ঠাটি থেকে বেরিয়ে আসছেন না ...

— প্যাট্রিক

6

এই উত্তরটি যদি আপনি আইফ্রেম প্রতিটি ক্লিকের পেতে চান, তাদের সবচেয়ে ভাল হয় তবে আপনি ফোকাস গ্রহণ করে আউট একবার ব্যবহারকারী ক্লিক করা হয়েছে প্রয়োজন যাতে আরও ক্লিকে নিরীক্ষণ হবে। এই $ (উইন্ডো) .blur () বিভাগে যুক্ত করতে হবে: setTimeout(function(){ window.focus(); }, 0);। এখন, ব্যবহারকারী ক্লিক করে, iframe এ ফোকাস রাখে, স্ক্রিপ্টটি ফোকাসটিকে পিছনে ফেলে দেয় এবং এখন ভবিষ্যতের ক্লিকগুলি থেকে আরও ফোকাস পরিবর্তনগুলি পর্যবেক্ষণ করতে পারে।

— হেল্পিংহ্যান্ড

89

এটি একটি ছোট সমাধান যা সমস্ত ব্রাউজারে এমনকি আইই 8 তেও কাজ করে:

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

আপনি এটি এখানে পরীক্ষা করতে পারেন: http://jsfiddle.net/oqjgzsm0/

— দিমিত্রি কোচিন
সূত্র

1

আপনার যদি বেশ কয়েকটি আইফ্রেম থাকে এবং আপনি তাদের আইডি জানেন না?

— শঙ্খের

1

শুধুমাত্র ক্রস ব্রাউজারের নির্ভরযোগ্য সমাধান যা সর্বশেষ এফএফ-তেও কাজ করে! অনেক ধন্যবাদ. এটি আরও উন্নয়নের দাবিদার

— ব্রেইনওভারফ্লো

6

@ শঙ্কশেরা শুধু এলিমি.আইডি পান, এটি আপনার আইফ্রেমে আইডি :)। Jsfiddle.net/oqjgzsm0/219

— কাফকা

1

আমি সামাজিক মত বোতাম ক্লিক ক্লিক করতে এটি ব্যবহার করছি। তবে যেগুলির মধ্যে 3/4 আমি আইফ্রেম ব্যবহার করছি তার জন্য আমার একাধিক আইফ্রেমে ক্লিকগুলি ট্র্যাক করা দরকার। এর জন্য অনুমতি দেওয়ার জন্য আমি ফিডলটি আপডেট করেছি: jsfiddle.net/oqjgzsm0/273 । এটি একটি নতুন বিরতি সেট করে যা চূড়ান্তভাবে ক্লিক করে একটি ক্লিক সর্বশেষ ক্লিক করা ইফ্রেমের বাইরে রয়েছে কিনা তা পরীক্ষা করে। তারপরে আবার ক্লিকগুলির জন্য চেক করতে মূল বিরতি পুনরায় সেট করুন। এটির বাইরে ক্লিক না করে এটি একই আইফ্রেমে একাধিক ক্লিককে ট্র্যাক করে না।

— brouxhaha

14

এ জাতীয় হারে অবিচ্ছিন্নভাবে লুপিং ব্যবধানটি ব্যবহার করা খুব ভাল ধারণা নয়, ব্যবহারকারী যদি ট্যাব কী নেভিগেশনের মাধ্যমে আইফ্রেমে ফোকাস সেট করে তবে এটি মিথ্যা ইতিবাচক বিষয়গুলি সনাক্ত করতে পারে

— কাইডো

36

নিম্নলিখিত কোডটি আপনাকে দেখায় যদি ব্যবহারকারী ক্লিক করে / হোভার করে বা আইফ্রেমের বাইরে চলে যায়: -

<!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 প্রতিস্থাপন করতে হবে। আশা করি এটি সাহায্য করবে শুভেচ্ছা, মো।

— মোহাম্মদ রাদওয়ান
সূত্র

1

দ্রুত পরীক্ষার উপর ভিত্তি করে প্রদত্ত উদাহরণটি (ইউআরএল ফিক্স করার পরে) IE 8 এ কাজ করছে বলে মনে হচ্ছে Chrome কিছুটা নির্ভরযোগ্যভাবে 14.0.835.186 মি, তবে ফায়ারফক্স 6.0.2 তে মোটেই নয়।

— ম্যাথু ফ্ল্যাশেন

ক্রোমের পক্ষে দুর্দান্ত কাজ করে তবে ফায়ারফক্স ভি 62 এর জন্য কাজ করে না, কারণ যখন আইফ্রেমে অস্পষ্ট ইভেন্টটি ক্লিক করা হয় তখন ছোঁড়া হয় না

— 11

11

সবেমাত্র এই সমাধানটি খুঁজে পেয়েছি ... আমি চেষ্টা করেছি, আমি এটি পছন্দ করেছি ..

ডেস্কটপ এবং মোবাইলের জন্য ক্রস ডোমেনের জন্য কাজ করে!

এটি এখনও নির্বোধ কিনা তা জানেন না

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

শুভ কোডিং

— টনি
সূত্র

2

এই একই উত্তরটি (সম্ভবত কিছুটা ভাল সংস্করণ) পোস্ট করা হয়েছিল এক বছর আগে এখানে এই একই পৃষ্ঠায়: stackoverflow.com/a/23231136/470749

— রায়ান

5

উইন্ডো উপাদানটিতে অস্পষ্ট ইভেন্টটি ব্যবহার করে আপনি এটি অর্জন করতে পারেন।

এখানে আইফ্রেমে ট্র্যাকিং ক্লিকের জন্য একটি jQuery প্লাগইন রয়েছে (এটি যদি একটি আইফ্রেমে ক্লিক করা হয় তখন এটি একটি কাস্টম কলব্যাক ফাংশনটি ছড়িয়ে দেবে): 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/ দেখুন

        $(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 থেকে @ ওমর জ্যাকম্যান .. ইউটিউব বিজ্ঞাপনে ক্লিক করতে এত সহায়ক

— saun4frsh

4

এটি আমার জন্য সমস্ত ব্রাউজারে (ফায়ারফক্স অন্তর্ভুক্ত) কাজ করে

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>

— sidanmor
সূত্র

3

মোহাম্মদ রাদওয়ান, আপনার সমাধান মার্জিত। ফায়ারফক্স এবং আই-তে আইফ্রেমে ক্লিকগুলি সনাক্ত করতে, আপনি ডকুমেন্ট.এটিভএলিমেন্ট এবং একটি টাইমার সহ একটি সহজ পদ্ধতি ব্যবহার করতে পারেন, তবে ... আমি ক্রোম এবং সাফারিতে আইফ্রেমে ক্লিকগুলি সনাক্ত করতে একটি পদ্ধতির জন্য সমস্ত ইন্টারভেজে অনুসন্ধান করেছি। হাল ছেড়ে দেওয়ার প্রান্তে আমি আপনার উত্তরটি পেয়েছি। ধন্যবাদ জনাব!

কিছু টিপস: আমি সংযুক্তিঅনলোডডেন্ট () এর পরিবর্তে সরাসরি ডিএন () ফাংশনটি কল করার সময় আপনার সমাধানটি আরও নির্ভরযোগ্য বলে খুঁজে পেয়েছি। অবশ্যই এটি করার জন্য, আপনাকে অবশ্যই কল করতে হবে init () কেবল iframe html এর পরে after সুতরাং এটি দেখতে কিছু হবে:

<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
সূত্র

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

আরও ইভেন্টের জন্য কেবল ইভেন্টলিস্টটি প্রসারিত করুন।

— ট্যানার টপাল
সূত্র

আমি 'টাচেন্ড' ইভেন্ট ব্যবহার করেছি এবং এটি কার্যকর হয়েছে! আপনার উত্তর আমাকে অনেক সাহায্য করেছে!

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

— pizzarob
সূত্র

3

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

কেবল আইফ্রেমে একটি অদৃশ্য স্তর তৈরি করুন যা ক্লিক করার পরে ফিরে যেতে হবে এবং মাউসলেভ ইভেন্টটি চালিত হবে যখন উপরে যান !!
JQuery প্রয়োজন

এই সমাধানটি ইফ্রেমে ভিতরে ক্লিক না করে প্রথম ক্লিক করুন!

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

উপরের উত্তরটির সংমিশ্রণে ইফ্রেমে বাইরে ক্লিক না করে বারবার ক্লিক করার ক্ষমতা সহ।

    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

আমরা সমস্ত ক্লিকগুলি ধরতে পারি। প্রতিটি ক্লিকের পরে আইফ্রেমের বাইরে কোনও উপাদানের উপর ফোকাস পুনরায় সেট করার ধারণাটি হ'ল:

    <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

যেমনটি পাওয়া গেছে: জাভাস্ক্রিপ্ট ব্যবহার করে আইফ্রেমে ক্লিক করুন সনাক্ত করুন

=> আমরা 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
সূত্র

0

পল ড্রাগার এর উত্তরের ভিত্তিতে, আমি এমন একটি সমাধান তৈরি করেছি যা অবিচ্ছিন্নভাবে কাজ করে যখন আপনার ব্রাউজারে অন্য ট্যাব খুললে আইফ্রেমেস থাকে। যখন আপনি পৃষ্ঠায় ফিরে আসেন তখন ফ্রেমওয়ার্কের উপর ক্লিকটি সনাক্ত করতে সক্রিয় হতে থাকুন, এটি খুব সাধারণ পরিস্থিতি:

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

কোডটি সহজ, ব্লার ইভেন্টটি যদি আইফ্রেমে ক্লিক করা হয় তবে ফোকাসের ক্ষতি হারাতে পারে এবং সক্রিয় উপাদানটি যদি আইফ্রেমে হয় তা পরীক্ষা করে নিন (আপনার যদি বেশ কয়েকটি আইফ্রেমে থাকে তবে আপনি কে নির্বাচিত হয়েছেন তা জানতে পারেন) আপনার যখন প্রচারের ফ্রেম রয়েছে তখন এই পরিস্থিতি প্রায়শই হয় ।

দ্বিতীয় পৃষ্ঠাটি যখন আপনি পৃষ্ঠাটিতে ফিরে আসবেন তখন একটি ফোকাস পদ্ধতির ট্রিগার করে। এটি দৃশ্যমানতা পরিবর্তন ইভেন্ট ব্যবহার করা হয়।

— freedeveloper
সূত্র

0

হোভার + ব্লার এবং সক্রিয় উপাদানগুলির কৌশলগুলি সহ কোনও প্রস্তাবিত পদ্ধতির সাহায্যে সমাধান রয়েছে, কোনও লাইব্রেরি নয়, কেবল খাঁটি জেএস। এফএফ / ক্রোমের জন্য দুর্দান্ত কাজ করে। প্রায়শই অ্যাপ্রোচ @ মোহাম্মদ রাদওয়ান প্রস্তাবিত হিসাবে একই, আমি এফএফ-এর জন্য আইফ্রেমে ক্লিক ট্র্যাক করতে @ জোনে 117x দ্বারা প্রস্তাবিত বিভিন্ন পদ্ধতি ব্যবহার করি কারণ উইন্ডো.ফোকাস অতিরিক্ত ব্যবহারকারীর সেটিংস ছাড়া কাজ করে না :

উইন্ডোটি সামনে আনার জন্য অনুরোধ জানায়। এটি ব্যবহারকারীর সেটিংসের কারণে ব্যর্থ হতে পারে এবং এই পদ্ধতিটি ফিরে আসার আগে উইন্ডোটি সামনেরতম হওয়ার গ্যারান্টিযুক্ত নয়।

যৌগিক পদ্ধতিটি এখানে:

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
সূত্র

0

অনুমান -

আপনার স্ক্রিপ্টটি বহিরাগততম উইন্ডো.টপ উইন্ডোতে নয় তবে আইফ্রেমের বাইরে চলে। (বাইরেরতম উইন্ডোর জন্য, অন্যান্য অস্পষ্ট সমাধানগুলি যথেষ্ট ভাল)
বর্তমান পৃষ্ঠা / নতুন পৃষ্ঠাকে নতুন ট্যাবে প্রতিস্থাপন করে একটি নতুন পৃষ্ঠা খোলা হবে এবং নিয়ন্ত্রণটি নতুন ট্যাবে স্যুইচ করা হয়।

এটি উত্স এবং উত্সহীন উভয় 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");
    }
});

যদি কোনও নতুন ট্যাব খোলা থাকে / একই পৃষ্ঠাটি আনলোড হয় এবং মাউস পয়েন্টারটি যদি ইফ্রেমের মধ্যে থাকে তবে একটি ক্লিক বিবেচনা করা হবে

— সাহিল মনিয়ার
সূত্র