我知道iframe如果是跨域，则无法判断用户在内部做什么。我想做的是跟踪用户是否在iframe. 我想象这样一个场景，还有一个看不见div的顶部iframe和的div单击事件只会然后传递给iframe。
这样的事情可能吗？如果是，那我该怎么办？的iframes是广告，所以我必须在所使用的标签没有控制权。
使用 JavaScript 检测点击 Iframe
IT技术
javascript
iframe
ads
dom-events
click-tracking
2021-01-29 15:05:20
6个回答
这当然是可能的。这适用于 Chrome、Firefox 和 IE 11（可能还有其他）。
const message = document.getElementById("message");
// main document must be focused in order for window blur to fire when the iframe is interacted with.
// There's still an issue that if user interacts outside of the page and then click iframe first without clicking page, the following logic won't run. But since the OP is only concerned about first click this shouldn't be a problem.
window.focus()
window.addEventListener("blur", () => {
setTimeout(() => {
if (document.activeElement.tagName === "IFRAME") {
message.textContent = "clicked " + Date.now();
console.log("clicked");
}
});
}, { once: true });<div id="message"></div>
<iframe width="50%" height="300" src="//example.com"></iframe>警告：这只检测第一次点击。据我了解，这就是你想要的。
基于 Mohammed Radwan 的回答，我想出了以下 jQuery 解决方案。基本上它的作用是跟踪 iFrame 人们正在悬停的内容。然后，如果窗口模糊，则很可能意味着用户单击了 iframe 横幅。
iframe 应该放在一个带有 id 的 div 中，以确保您知道用户单击了哪个 iframe：
<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 没有注册它。
再次感谢穆罕默德，非常有用的解决方案！
这是一个适用于所有浏览器甚至 IE8 的小解决方案：
var monitor = setInterval(function(){
var elem = document.activeElement;
if(elem && elem.tagName == 'IFRAME'){
clearInterval(monitor);
alert('clicked!');
}
}, 100);
你可以在这里测试：http : //jsfiddle.net/oqjgzsm0/
这样的事情可能吗？
不。您所能做的就是检测进入 iframe 的鼠标，并且可能（虽然不可靠）当它回来时（即尝试计算出在其他地方经过广告的指针与挥之不去的指针之间的差异）在广告上）。
我想象一个场景，在 iframe 顶部有一个不可见的 div，然后 div 将点击事件传递给 iframe。
不，没有办法伪造点击事件。
通过捕捉mousedown，您将阻止原始点击进入iframe。如果您可以确定鼠标按钮何时将被按下，您可以尝试将不可见的 div 移开，以便点击可以通过……但也没有在鼠标按下之前触发的事件。
您可以尝试猜测，例如通过查看指针是否已停止，猜测可能即将出现点击。但它完全不可靠，如果你失败了，你就失去了一个点击率。
以下代码将显示用户是否单击/悬停或移出 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 替换为您自己的链接。希望这会有所帮助。问候，莫。