[javascript] JavaScript를 사용하여 클릭하여 Iframe으로 감지

iframe교차 도메인 인 경우 사용자가 내부에서 수행중인 작업을 알 수 없다는 것을 이해 합니다. 내가하고 싶은 것은 사용자가에서를 클릭했는지 추적하는 것 iframe입니다. 나는 보이지 않는이 시나리오 상상 div의 상단을 iframe하고하여이 div바로 다음에 클릭 이벤트를 전달합니다 iframe.

이와 같은 것이 가능합니까? 그렇다면 어떻게해야합니까? 는 iframes광고입니다, 그래서 사용되는 태그를 제어 할 수 없습니다.

답변

이와 같은 것이 가능합니까?

아니요. 할 수있는 일은 iframe으로 들어가는 마우스를 감지하는 것입니다. 마우스가 다시 나올 때 (확실히 신뢰할 수는 없지만) 다른 곳에서 진행되는 방식으로 광고를 전달하는 포인터의 차이를 해결하려고 시도하는 것 광고).

iframe 위에 보이지 않는 div가 있고 div가 클릭 이벤트를 iframe으로 전달하는 시나리오를 상상합니다.

아니요, 클릭 이벤트를 위조 할 방법이 없습니다.

마우스 다운을 잡으면 원래 클릭이 iframe에 도달하지 못하게됩니다. 마우스 버튼을 언제 눌렀는지 알 수 있다면 보이지 않는 div를 벗어나서 클릭이 진행되도록 할 수 있지만 마우스 다운 직전에 발생하는 이벤트는 없습니다.

예를 들어, 포인터가 멈춰 있는지 확인하여 클릭이 다가올 수 있습니다. 그러나 그것은 완전히 신뢰할 수 없으며, 실패하면 클릭 연결을 잃어버린 것입니다.

답변

확실히 가능합니다. 이것은 Chrome, Firefox 및 IE 11 (및 기타)에서 작동합니다.

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

JSFiddle

주의 사항 : 첫 번째 클릭 만 감지합니다. 알다시피, 그게 당신이 원하는 전부입니다.

답변

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

… iframe을 가리 키지 않으면 overiFrame을 -1로 유지하거나 iframe을 가리킬 때 래핑 div에 ‘bannerid’를 설정합니다. 다음과 같이 창이 흐리게 나타날 때 ‘overiFrame’이 설정되어 있는지 확인하면됩니다. …

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

사소한 단점이있는 매우 우아한 솔루션 : 사용자가 iFrame 위로 마우스를 가져갈 때 ALT-F4를 누르면 클릭으로 기록됩니다. FireFox에서만 발생했지만 IE, Chrome 및 Safari는 등록하지 않았습니다.

매우 유용한 솔루션 인 Mohammed를 다시 한번 감사드립니다!

답변

이것은 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를 자신의 링크로 교체해야합니다. 이것이 도움이되기를 바랍니다. 감사합니다.

답변

방금이 솔루션을 찾았습니다 … 시도해 보았습니다.

데스크톱 및 모바일 용 도메인 간 iframe에서 작동합니다!

그것이 아직 완전하지 않은지 모른다

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

행복한 코딩

답변

window 요소에서 blur 이벤트를 사용하여이를 달성 할 수 있습니다.

다음은 iframe 클릭을 추적하기위한 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)
        }
    });
});