Обнаружение нажмите Iframe с помощью JavaScript
https://stackoverflow.com/questions/2381336
-
24-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я понимаю, что невозможно сказать, что делает пользователь внутри iframe Если это перекрестный домен. Что я хотел бы сделать, это отслеживать, если пользователь нажал вообще в iframe. Отказ Я представляю, что сценарий, где есть невидимый div на вершине iframe и то div только тогда пройдет событие кликов к iframe.
Что-то так это возможно? Если это так, то как бы я пошел об этом? То iframes реклама, поэтому я не контролирую теги, которые используются.
Решение
Что-то так это возможно?
Нет. Все, что вы можете сделать, это обнаружить мышь в iFrame и потенциально (хотя и не надежно), когда она возвращается (т. Е. Попытка выработать разницу между указателем, проходящей над объявлением, на пути где-то еще против на объявление).
Я представляю, что сценарий, в котором есть невидимый div поверх iframe и div просто пропустит событие Щелта для iframe.
Нету, нет возможности подделать событие щелчка.
Проверяя Mousedown, вы бы пометер оригинал, чтобы получить добраться до IFRAME. Если бы вы могли определить, когда кнопка мыши было нажато нажать, вы можете попытаться получить невидимый девл из способа, чтобы щелчок пройдет ... Но есть также событие, которое стрельбы перед Mousedown.
Вы могли бы попытаться догадаться, например, искали, чтобы посмотреть, пришло ли указатель отдохнуть, угадывая щелчок может прийти. Но это совершенно ненадежно, и если вы не сможете, вы только что потеряли себя клик.
Другие советы
Это, безусловно, возможно. Это работает в Chrome, Firefox и IE 11 (и, вероятно, других).
focus();
var listener = window.addEventListener('blur', function() {
if (document.activeElement === document.getElementById('iframe')) {
// clicked
}
window.removeEventListener('blur', listener);
});
Предостережение: это только обнаруживает первый клик. Как я понимаю, это все, что вы хотите.
На основании ответа Мухаммеда Радвана я придумал следующее решение JQuery. В основном то, что он делает, это отслеживать, что делают, если бы люди наваливаются. Затем, если окно Blurs, которые, скорее всего, означает, что пользователь нажал на баннер Iframe.
IFrame следует поставить в 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
});
... Это сохраняет unveriframe AT -1, когда нет никаких IFRAMES, или «BANNERID», установленный в упаковке DIV, когда iFrame загружается. Все, что вам нужно сделать, это проверить, установлено ли «overiframe», когда окно Blurs, как так: ...
$(window).blur( function() {
if( overiFrame != -1 )
$.post('log.php', {id:overiFrame}); /* example, do your stats here */
});
});
Очень элегантное решение с незначительным недостатком: если пользователь нажимает ALT-F4, когда зависает мышь на iFrame, он будет введет его в систему как щелчок. Это произошло только в Firefox, то есть 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: -
<!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 с вашей собственной ссылкой. Надеюсь, это поможет. С уважением, МО.
Только что нашел это решение ... я попробовал, я любил это ..
Работает для перекрестного домена iframes для рабочего стола и мобильного телефона!
Не знаю, если это надежно
window.addEventListener('blur',function(){
if(document.activeElement.id == 'CrossDomainiframeId'){
//do something :-)
}
});
Счастливый кодирование
Вы можете добиться этого, используя размытие события на окне элемента.
Вот плагин jQuery для отслеживания щелчка щелчка IFRAMES (он пожарит пользовательский обратный вызов, когда нажат 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)
}
});
});
видеть http://jsfiddle.net/lcy797H2/ Для моего длинного заводного раствора, которое не работает надежно в IE
$(window).on('blur',function(e) {
if($(this).data('mouseIn') != 'yes')return;
$('iframe').filter(function(){
return $(this).data('mouseIn') == 'yes';
}).trigger('iframeclick');
});
$(window).mouseenter(function(){
$(this).data('mouseIn', 'yes');
}).mouseleave(function(){
$(this).data('mouseIn', 'no');
});
$('iframe').mouseenter(function(){
$(this).data('mouseIn', 'yes');
$(window).data('mouseIn', 'yes');
}).mouseleave(function(){
$(this).data('mouseIn', null);
});
$('iframe').on('iframeclick', function(){
console.log('Clicked inside iframe');
$('#result').text('Clicked inside iframe');
});
$(window).on('click', function(){
console.log('Clicked inside window');
$('#result').text('Clicked inside window');
}).blur(function(){
console.log('window blur');
});
$('<input type="text" style="position:absolute;opacity:0;height:0px;width:0px;"/>').appendTo(document.body).blur(function(){
$(window).trigger('blur');
}).focus();
Mohammed Radwan, ваше решение элегантно. Чтобы обнаружить iframe щелкает в Firefox и IE, вы можете использовать простой способ с документом. Многоаксируют и таймером, однако ... Я искал по всему интервалу для метода для определения щелчков на iFrame в Chrome и Safari. На грани сдачи я нахожу свой ответ. Спасибо, сэр!
Некоторые советы: я нашел ваше решение, чтобы быть более надежным при вызове функции init () напрямую, а не через AttachonloadEvent (). Конечно, чтобы сделать это, вы должны позвонить в init () только после IFRAME HTML. Так что это будет выглядеть что-то вроде:
<script>
var isOverIFrame = false;
function processMouseOut() {
isOverIFrame = false;
top.focus();
}
function processMouseOver() { isOverIFrame = true; }
function processIFrameClick() {
if(isOverIFrame) {
//was clicked
}
}
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);
}
}
</script>
<iframe src="http://google.com"></iframe>
<script>init();</script>
Вы можете сделать это со событиями пузырьков в родительский документ:
$('iframe').load(function() {
var eventlist = 'click dblclick \
blur focus focusin focusout \
keydown keypress keyup \
mousedown mouseenter mouseleave mousemove mouseover mouseout mouseup mousemove \
touchstart touchend touchcancel touchleave touchmove';
var iframe = $('iframe').contents().find('html');
// Bubble events to parent
iframe.on(eventlist, function(event) {
$('html').trigger(event);
});
});
Просто продлить EventList для большего количества событий.
Я столкнулся с ситуацией, когда мне пришлось отслеживать клики на кнопке социальных медиа, вытащенных через Iframe. Новое окно будет открыто, когда кнопка нажала. Вот мое решение:
var iframeClick = function () {
var isOverIframe = false,
windowLostBlur = function () {
if (isOverIframe === true) {
// DO STUFF
isOverIframe = false;
}
};
jQuery(window).focus();
jQuery('#iframe').mouseenter(function(){
isOverIframe = true;
console.log(isOverIframe);
});
jQuery('#iframe').mouseleave(function(){
isOverIframe = false;
console.log(isOverIframe);
});
jQuery(window).blur(function () {
windowLostBlur();
});
};
iframeClick();
Это работает для меня на всех браузерах (включая Firefox)
https://gist.github.com/jaydson/1780598.
https://jsfiddle.net/sidanmor/v6m9exsw/
var myConfObj = {
iframeMouseOver : false
}
window.addEventListener('blur',function(){
if(myConfObj.iframeMouseOver){
console.log('Wow! Iframe Click!');
}
});
document.getElementById('idanmorblog').addEventListener('mouseover',function(){
myConfObj.iframeMouseOver = true;
});
document.getElementById('idanmorblog').addEventListener('mouseout',function(){
myConfObj.iframeMouseOver = false;
});<iframe id="idanmorblog" src="https://sidanmor.com/" style="width:400px;height:600px" ></iframe><iframe id="idanmorblog" src="https://sidanmor.com/" style="width:400px;height:600px" ></iframe>
http://jsfiddle.net/qcaee/406/
Просто сделайте невидимый слой над IFrame, который вернутся, когда нажмите и подниматься, когда будет уволен событие MouseLeave !!
Нужен jquery
Это решение не распространяется в первый щелчок внутри Iframe!
$("#invisible_layer").on("click",function(){
alert("click");
$("#invisible_layer").css("z-index",-11);
});
$("iframe").on("mouseleave",function(){
$("#invisible_layer").css("z-index",11);
});iframe {
width: 500px;
height: 300px;
}
#invisible_layer{
position: absolute;
background-color:trasparent;
width: 500px;
height:300px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message"></div>
<div id="invisible_layer">
</div>
<iframe id="iframe" src="//example.com"></iframe>Это определенно работает, если iFrame состоит из того же домена, что и ваш родительский сайт. Я не проверил его для междоменных сайтов.
$(window.frames['YouriFrameId']).click(function(event){ /* do something here */ });
$(window.frames['YouriFrameId']).mousedown(function(event){ /* do something here */ });
$(window.frames['YouriFrameId']).mouseup(function(event){ /* do something here */ });
Без jQuery вы можете попробовать что-то вроде этого, но опять же я не пробовал это.
window.frames['YouriFrameId'].onmousedown = function() { do something here }
Вы даже можете отфильтровать ваши результаты:
$(window.frames['YouriFrameId']).mousedown(function(event){
var eventId = $(event.target).attr('id');
if (eventId == 'the-id-you-want') {
// do something
}
});
Я верю, что вы можете сделать что-то вроде:
$('iframe').contents().click(function(){function to record click here });
Использование jQuery для достижения этого.
Как нашел там: Обнаружение нажмите Iframe с помощью JavaScript
=> Мы можем использовать iframetracker-jQuery :
$('.carousel-inner .item').each(function(e) {
var item = this;
var iFrame = $(item).find('iframe');
if (iFrame.length > 0) {
iFrame.iframeTracker({
blurCallback: function(){
// Do something when iFrame is clicked (like firing an XHR request)
onItemClick.bind(item)(); // calling regular click with right context
console.log('IFrameClick => OK');
}
});
console.log('IFrameTrackingRegistred => OK');
}
})
В зависимости от ответа Paul Draper я создал решение, которое непрерывно работает, когда у вас есть IFRAMES, которые открывают другие вкладки в браузере. Когда вы возвращаете страницу, по-прежнему активируйте, чтобы обнаружить клик за каркасом, это очень распространенная ситуация:
focus();
$(window).blur(() => {
let frame = document.activeElement;
if (document.activeElement.tagName == "IFRAME") {
// Do you action.. here frame has the iframe clicked
let frameid = frame.getAttribute('id')
let frameurl = (frame.getAttribute('src'));
}
});
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
} else {
focus();
}
});
Код прост, событие Blur определяет потерянный фокус, когда IFrame нажат, и тестируйте, если активный элемент IFrame (если у вас есть несколько iFrame, вы можете знать, кто был выбран) Эта ситуация часто, когда у вас есть рекламные рамки Отказ
Второе событие вызывает метод фокусировки при возврате на страницу. Используется событие изменения видимости.
Вот решение с использованием предложенных подходов с Hover + Blur и хитрости активных элементов, а не какие-либо библиотеки, просто чистые JS. Работает нормально для FF / Chrome. В основном подход выглядит такой же, как предложенный @mohammed Radwan, за исключением того, что я использую другой метод, предложенный @ Zone117x, чтобы отслеживать IFRAME Нажмите для FF, потому что window.focus. не работает без дополнения пользовательские настройки:
Делает запрос, чтобы довести окно на фронт. Он может потерпеть неудачу из-за пользовательских настроек, и окно не гарантировано переднее, прежде чем этот метод возвращается.
Вот сложный метод:
function () {
const state = {};
(function (setup) {
if (typeof window.addEventListener !== 'undefined') {
window.addEventListener('load', setup, false);
} else if (typeof document.addEventListener !== 'undefined') {
document.addEventListener('load', setup, false);
} else if (typeof window.attachEvent !== 'undefined') {
window.attachEvent('onload', setup);
} else {
if (typeof window.onload === 'function') {
const oldonload = onload;
window.onload = function () {
oldonload();
setup();
};
} else {
window.onload = setup;
}
}
})(function () {
state.isOverIFrame = false;
state.firstBlur = false;
state.hasFocusAcquired = false;
findIFramesAndBindListeners();
document.body.addEventListener('click', onClick);
if (typeof window.attachEvent !== 'undefined') {
top.attachEvent('onblur', function () {
state.firstBlur = true;
state.hasFocusAcquired = false;
onIFrameClick()
});
top.attachEvent('onfocus', function () {
state.hasFocusAcquired = true;
console.log('attachEvent.focus');
});
} else if (typeof window.addEventListener !== 'undefined') {
top.addEventListener('blur', function () {
state.firstBlur = true;
state.hasFocusAcquired = false;
onIFrameClick();
}, false);
top.addEventListener('focus', function () {
state.hasFocusAcquired = true;
console.log('addEventListener.focus');
});
}
setInterval(findIFramesAndBindListeners, 500);
});
function isFF() {
return navigator.userAgent.search(/firefox/i) !== -1;
}
function isActiveElementChanged() {
const prevActiveTag = document.activeElement.tagName.toUpperCase();
document.activeElement.blur();
const currActiveTag = document.activeElement.tagName.toUpperCase();
return !prevActiveTag.includes('BODY') && currActiveTag.includes('BODY');
}
function onMouseOut() {
if (!state.firstBlur && isFF() && isActiveElementChanged()) {
console.log('firefox first click');
onClick();
} else {
document.activeElement.blur();
top.focus();
}
state.isOverIFrame = false;
console.log(`onMouseOut`);
}
function onMouseOver() {
state.isOverIFrame = true;
console.log(`onMouseOver`);
}
function onIFrameClick() {
console.log(`onIFrameClick`);
if (state.isOverIFrame) {
onClick();
}
}
function onClick() {
console.log(`onClick`);
}
function findIFramesAndBindListeners() {
return Array.from(document.getElementsByTagName('iframe'))
.forEach(function (element) {
element.onmouseover = onMouseOver;
element.onmouseout = onMouseOut;
});
}
}
Объединение выше ответа с возможностью нажимать снова и снова, не щелкая снаружи IFrame.
var eventListener = window.addEventListener('blur', function() {
if (document.activeElement === document.getElementById('contentIFrame')) {
toFunction(); //function you want to call on click
setTimeout(function(){ window.focus(); }, 0);
}
window.removeEventListener('blur', eventListener );
});
