Обнаружьте Щелчок в Iframe с помощью JavaScript
Я понимаю, что не возможно сказать то, что пользователь делает в iframe если это - перекрестный домен. То, что я хотел бы сделать, отследить, если пользователь нажал вообще в iframe. Я воображаю сценарий, где существует невидимая операция div сверху iframe и div именно тогда передаст событие щелчка iframe.
Действительно ли что-то вроде этого возможно? Если бы это, то, как я пошел бы об этом? iframes реклама, таким образом, я не имею никакого контроля над тегами, которые используются.
2 ответа
Возможно ли что-то подобное?
Нет. Все, что вы можете сделать, это определить, когда мышь входит в iframe, и потенциально (хотя и ненадежно), когда она выходит обратно (т.е. попытаться определить разницу между указателем, проходящим мимо рекламы по пути в другое место, и задерживающимся на рекламе).
Я представляю себе сценарий, в котором есть невидимый div поверх iframe, и div будет просто передавать событие click в iframe.
Нет, подделать событие клика невозможно.
Перехватив mousedown, вы предотвратите попадание исходного щелчка в iframe. Если бы вы могли определить, когда кнопка мыши будет нажата, вы могли бы попытаться убрать невидимый div с пути, чтобы клик прошел... но также нет события, которое срабатывает непосредственно перед mousedown.
Можно попытаться угадать, например, посмотреть, не остановился ли указатель, и предположить, что щелчок вот-вот произойдет. Но это совершенно ненадежно, и если вы потерпите неудачу, то только что лишитесь прохода по клику.
Следующий код покажет вам, если пользователь щелкнет / зависнет или покинет 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>
Вам необходимо заменить src в iframe своей собственной ссылкой. Надеюсь, это поможет. С уважением, Пн