我的广告系统提供商收到了有关点击欺诈的警告。没有进一步的信息,他们所推荐的是“为太快点击广告的用户隐藏广告”。我写了一段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”)。如果是跨域,则无效。有什么提示,老兄?
答案 0 :(得分:7)
您无法检测跨域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!');
}
});
然而,它不可靠,松散焦点并不意味着点击,可能是用户使用 TAB 在网站上移动。
另一个问题是,你只检测到第一次将焦点移动到iframe,你不知道用户在那里做了什么,他可以点击一百万次,你永远不会知道。
答案 1 :(得分:5)
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的时间允许我重新组织我的不同图层以保持幻觉完美。
答案 2 :(得分:0)
好吧,不久前我找到了this plugin for WordPress。显然它完成了我的需要 - 只是想知道这个人是如何使它工作的,它确实计算了Adsense iframe的点击次数。我必须仔细看看,虽然我不是PHP程序员。我主要用Python编程,需要一些Django的解决方案。如果任何人都可以轻松阅读代码,我将不胜感激任何帮助。
答案 3 :(得分:0)
插件首先搜索由先前指定的类名包装的任何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();
}
}
答案 4 :(得分:0)
选中此选项可能会有所帮助。跨浏览器时,您无法检测到click事件。
window.focus();
window.addEventListener('blur', function(e){
if(document.activeElement == document.getElementById('Your iframe id'))
{
console.log('iframe click!');
}
});
答案 5 :(得分:0)
@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
个事件来模拟移动设备上的鼠标悬停。