検出ックをIframe JavaScriptを使用

https://stackoverflow.com/questions/2381336

24-09-2019
|

質問

理解していることができないか、ユーザーがいる iframe であればクロスドメイン.どのようなトラックの場合はユーザがクリックしているさま iframe.私は想像のシナリオがある場合には見えない div 上に iframe のの div まだその後のクリックイベントの iframe.

あのようなことは可能ですか？であれば、それはどのように行っているのでしょうか？の iframes は、広告はありませんのタグが使用されます。

解決

は、この可能性？
のようなものです

はありません。あなたがすることができるすべては、それが出て戻ってきたときに、マウスが（（ではないが確実に）IFRAMEに入ると、潜在的にすなわち。上長引く対どこかその途中で広告の上を通過するポインタの違いをうまくしようとして検出されます広告）。

私は、IFRAMEの上に目に見えないdiv要素があるシナリオと想像のdivだけで、その後はiframeにクリックイベントを渡します。

いや、偽のクリックイベントに方法はありません。

マウスダウンを引くことによって、あなたはインラインフレームになってから、元のクリックを防ぐだろう。あなたが決めることができれば、マウスボタンが押されようとしていたとき、あなたはクリックを経るなるように邪魔にならない目に見えないのdivを取得しようとすることができます...しかし、ただマウスダウンの前に火災というイベントもありません。

ポインタは休むようになってきた場合は、

あなたは来ることを約あるかもしれないクリックを推測、見て見ていることにより、例えば、推測しようとすることができます。しかし、それは完全に信頼できないですし、あなたが失敗した場合、あなただけの自分でクリックスルーます。

を失ってしまいました

他のヒント

これは確かに可能です。このクロム、Firefox、およびIE 11（そしておそらく他の人）で動作します。

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

JSFiddleする

<時間>

警告：これは最初のクリックを検出しました。私は理解しているように、それはあなたが望むすべてです。

モハメッドRadwanの答えに基づいて私は、次のjQueryの解決策を考え出しました。基本的にはどのようなそれがないことのiFrameの人々がホバリングしているかのキープトラックです。そして、窓のブレ最も可能性の高い手段は、ユーザーがiframeのバナーをクリックした場合。

のiframeは必ず、ユーザーがクリックしたのiframeを知るにするために、idを持つdivの中に配置する必要があります

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

これます：

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

... これはでoveriFrameを保つ-1 IFRAMEを推移されたときに何のiFrameが推移していない、またはラッピングのdivの「bannerid」を設定しているとき。あなたがしなければならないようなので、「overiFrame」が時にウィンドウぼけ設定されている場合は、チェックです。 ...

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

マイナーの欠点を持つ

非常にエレガントなソリューション：iFrameの上にマウスを置くときに、ユーザーを押すとALT-F4場合、それはクリックとしてそれを記録します。これはしかし、IE、ChromeとSafariがそれを登録しませんでしたFirefoxで起こりました。

おかげで再びモハメッド、非常に便利なソリューション！

これはすべてのブラウザでも、IE8を働く小さなソリューションです。

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

あなたがここでそれをテストすることができます： http://jsfiddle.net/oqjgzsm0/ の

次のコードは、ユーザーのクリック/ホバーどうかを表示したり、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を交換する必要があります。これは助けいただければ幸いです。よろしく、 Moます。

ただ、この解決策を見つけました... 私はそれを愛し、それを試してみました..

デスクトップとモバイル！のためのクロスドメインのiframeのための作品。

それはまだ

誰にでもある場合は、

知りません

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

ハッピーコーディング

あなたは、ウィンドウの要素にblurイベントを使用することによって、これを達成することができます。

ここでは、アイフレーム上のクリックを追跡するための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)
        }
    });
});

ない私の長いったらしいソリューションを 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();

モハメッドRadwan、あなたのソリューションは、エレガントです。 IFRAMEはFirefoxとIEでクリックを検出するには、しかし...私はChromeとSafariでのiframeのクリックを検出する方法のためにinterwebsの上にすべてを検索しました、document.activeElementおよびタイマーとの簡単な方法を使用することができます。あきらめるの瀬戸際で、私はあなたの答えを見つけます。ありがとう、先生！

いくつかのヒント：私はむしろ（）attachOnloadEvent経由よりも、直接のinit（）関数を呼び出すときに、より信頼性が高いことがあなたのソリューションを発見しました。それを行うにはもちろん、あなただけの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>

あなたが親文書にバブルイベントにこれを行うことができます：

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

ただ、多くのイベントのためのeventlistを拡張します。

私は、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();

すべてのブラウザ（Firefoxのを含む）上の私にとってこの作品

https://gist.github.com/jaydson/1780598する

https://jsfiddle.net/sidanmor/v6m9exsw/する

var myConfObj = {
  iframeMouseOver : false
}
window.addEventListener('blur',function(){
  if(myConfObj.iframeMouseOver){
    console.log('Wow! Iframe Click!');
  }
});

document.getElementById('idanmorblog').addEventListener('mouseover',function(){
   myConfObj.iframeMouseOver = true;
});
document.getElementById('idanmorblog').addEventListener('mouseout',function(){
    myConfObj.iframeMouseOver = false;
});

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

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

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

はちょうどその時クリックしてmouseleaveイベントが起動されるとき!!
上がる戻っIFRAMEの上に目に見えない層を作ります必要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>

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

私はあなたのような何かを行うことができると信じています：

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

これを実現するためにjQueryを使用します。

としてはそこが見つかりました： JavaScriptのの

=>私たちは使用することができます iframeTracker-jqueryののます：

$('.carousel-inner .item').each(function(e) {
    var item = this;
    var iFrame = $(item).find('iframe');
    if (iFrame.length > 0) {
        iFrame.iframeTracker({
            blurCallback: function(){
                // Do something when iFrame is clicked (like firing an XHR request)
                onItemClick.bind(item)(); // calling regular click with right context
                console.log('IFrameClick => OK');
            }
        });
        console.log('IFrameTrackingRegistred => OK');
    }
})

ポール・ドレイパーの答えに基づいて、私は仕事が継続的にあなたはIフレームが持っているソリューションを作成し、ブラウザで開いている他のタブいます。あなたはページがフレームワーク上でクリックを検出するのに有効であり続ける戻ると、これは非常に一般的な状況です。

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

コードは単純で、blurイベントはIFRAMEをクリックしたときにフォーカスを失っ検出、および能動素子はインラインフレームであればときテストは（あなたは、いくつかのiframeを持っている場合は、選択されたかを知ることができます）このような状況が頻繁にあります広報フレームを持っています。

2つ目のイベント・トリガーページに戻るフォーカス方式。それは可視性変更イベントを使用されます。

こちらのソリューションを提案アプローチ推移+ブラーやアクティブ素子の技ではなくて、図書館、純js.動作FF/ロードしてください主approacheと同じ@-モハメドRadwan提案したことを除いて、使っている別の方法が提案@zone117xッiframeをクリックのためのFFで ウインドウです。焦点 はなく、ユーザー設定:

求めのウィンドウをフロントです。作動しなかった場合にユーザー設定ウィンドウにな保証する最前前この方法に戻ります。

この化合物方法

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

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

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow