Question

我的广告系统提供商收到了有关点击欺诈的警告。没有进一步的信息，他们所推荐的是“为太快点击广告的用户隐藏广告”。我写了一段JS脚本，点击时隐藏所有DIV广告N秒（使用cookie），但这个解决方案不起作用，因为“内部”内容（带有广告）是由调用和呈现的JS脚本生成的来自外部服务器的内容（正如您对广告系统的期望）。因此，当考虑到跨域安全性时，它有点像Catch 22.我如何检测DIV（本地定义）内部由外部JS和iframe呈现的内容中的单击？

示例：

<div class="ad-class"> <!-- locally defined div -->
   <div id="my-id"> </div> <!-- identifies my ad in the provider's system -->
   <script>
      var foo = blah // declares the ad dimensions and stuff
      //  and renders the contextual ad in #my-id DIV
   </script>
</div>

如果它都是本地的，解决方案将很容易，因为内部div将继承父类（“ad-class”）。如果是跨域，则无效。有什么提示，老兄？

Answer 1

您无法检测跨域iframe中的点击事件。

那么，你可能有一个不好的选择：

您可以做的最近事之一是检测焦点是否从您的窗口移动到iframe：

window.focus(); //force focus on the currenct window;
window.addEventListener('blur', function(e){
    if(document.activeElement == document.querySelector('iframe'))
    {
        alert('Focus Left Current Window and Moved to Iframe / Possible click!');
    }
});

http://jsfiddle.net/wk1yv6q3/

然而，它不可靠，松散焦点并不意味着点击，可能是用户使用 TAB 在网站上移动。

另一个问题是，你只检测到第一次将焦点移动到iframe，你不知道用户在那里做了什么，他可以点击一百万次，你永远不会知道。

Answer 2

Luizgrs启发了我这个解决方案：

var clickIframe = window.setInterval(checkFocus, 100);
var i = 0;

function checkFocus() {
  if(document.activeElement == document.getElementById("ifr")) {
  	console.log("clicked "+(i++));
  	window.focus();
   }
}

<!DOCTYPE html>
<h2>Onclick event on iframe</h2>
<iframe src="https://www.brokenbrowser.com/" id="ifr"></iframe>

该功能检测iframe是否具有焦点，如果是，则用户点击iframe。然后，我们将重点放回主窗口，这样我们就可以找到用户是否再次单击。

这个技巧对我来说对于2步iframe点击控制的POC非常有用。了解用户第一次点击iframe的时间允许我重新组织我的不同图层以保持幻觉完美。

Answer 3

好吧，不久前我找到了this plugin for WordPress。显然它完成了我的需要 - 只是想知道这个人是如何使它工作的，它确实计算了Adsense iframe的点击次数。我必须仔细看看，虽然我不是PHP程序员。我主要用Python编程，需要一些Django的解决方案。如果任何人都可以轻松阅读代码，我将不胜感激任何帮助。

Answer 4

插件首先搜索由先前指定的类名包装的任何iframe。

iframe ID将被收集在一个数组中，并且对于这些id的每个人都将创建一个mouseover事件，该事件将触发隐藏类“cfmonitor”的脚本。因此，包含广告的iframe不再可见。

// IFRAME ACTION
    function iframeAction () {
        jq.each(jq.cfmonitor.iframes, function(index,element) {
            frameID = jq(element).attr('id') || false;
            if (frameID) initiateIframe(frameID);
            //alert (frameID);
        });
    }

    // INIT IFRAME
    function initiateIframe(elementID) {
        var element = document.getElementById(elementID);
        // MOUSE IN && OUT
        if (element) {
            element.onmouseover = processMouseOver;
            element.onmouseout = processMouseOut;
            //console.log("mouse on out");
        }
        // CLICKS
        if (typeof window.attachEvent !== 'undefined') {
            top.attachEvent('onblur', processIFrameClick);
        }
        else if (typeof window.addEventListener !== 'undefined') {
            top.addEventListener('blur', processIFrameClick, false);
        }
}

// IFRAME CLICKS
    function processIFrameClick() {
        // ADD A CLICK
        if(isOverIFrame) {
            //addClick();
            // Some logic here to hide the class 'cfmonitor'
            //console.log("Go");
            top.focus();
        }
}

Answer 5

选中此选项可能会有所帮助。跨浏览器时，您无法检测到click事件。

window.focus();
window.addEventListener('blur', function(e){
  if(document.activeElement == document.getElementById('Your iframe id'))
   {
    console.log('iframe click!');
   }
});

Answer 6

@Luizgrs指出的方法非常准确，但是我设法使用各种方法来检测点击事件：

var iframeMouseOver = false;
    $("YOUR_CONTAINER_ID")
        .off("mouseover.iframe").on("mouseover.iframe", function() {
            iframeMouseOver = true;
        })
        .off("mouseout.iframe").on("mouseout.iframe", function() {
            iframeMouseOver = false;
        });

    $(window).off("blur.iframe").on("blur.iframe", function() {
        if(iframeMouseOver){
            $j("#os_top").click();
        }
    });

如果您想添加移动支持，则上面的代码在桌面上就像一个魅力，只需使用3 touchstart和touchend个事件来模拟移动设备上的鼠标悬停。

touch events

如何检测iframe内部的点击（跨域）？ Aka防止点击欺诈

6 个答案: