检测点击进入框架使用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，并有可能（尽管不可靠），当它回来了（即试图找出越过广告的道路上其他地方与挥之不去的指针之间的区别广告）。
我想象这样一个场景出现在iframe的顶部一种无形的股利和股利只会然后单击事件传递给iframe中。
不，就没有办法伪造点击事件。
通过捕获鼠标按下你会阻止原始点击从获取到iframe中。如果你能确定何时鼠标按钮即将被压制，你可以尝试以得到了无形的div的方式进行，这样的点击会经历......但也没有事件触发只是一个鼠标按下了。
您可以尝试通过查看猜测，例如，如果指针已经到了休息，猜测点击可能即将到来。但它是完全不可靠的，如果你失败了你只是失去了自己的点击。
其他提示
这当然是可能的。这个作品在Chrome，Firefox和IE 11（以及可能其它）。
focus();
var listener = window.addEventListener('blur', function() {
if (document.activeElement === document.getElementById('iframe')) {
// clicked
}
window.removeEventListener('blur', listener);
});
警告：这仅检测第一点击。据我所知，这是所有你想要的。
根据穆罕默德·拉德万的答案，我想出了下面的jQuery的解决方案。基本上它是什么的iFrame人徘徊的跟踪。然后，如果该最可能的手段，用户点击的IFRAME横幅窗口模糊。
在iframe应放在一个div的ID，以确保你知道哪些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
});
... 这保持overiFrame在-1时，没有iframe会徘徊，或在包装DIV当一个iframe悬停在“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出来： -
<!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。希望这会有所帮助。 问候， 沫。
刚刚发现这个解决方案... 我尝试了，我喜欢它..
Works的横域中的iframe桌面和移动！
不知道这是否是万无一失尚未
window.addEventListener('blur',function(){
if(document.activeElement.id == 'CrossDomainiframeId'){
//do something :-)
}
});
快乐编码
可以通过使用窗口元件上的模糊事件实现这一点。
下面是一个jQuery插件上的I帧跟踪点击（点击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();
穆罕默德拉德万， 您的解决方案是优雅。为了检测iframe中点击了Firefox和IE，你可以使用与document.activeElement和计时器一个简单的方法，但是...我已经找遍了所有在interwebs用于检测在Chrome和Safari的iframe点击的方法。在放弃的边缘，我找到答案。谢谢你，先生！
一些提示： 我发现您的解决方案直接调用init（）函数的时候，而不是通过attachOnloadEvent（）更可靠。当然，要做到这一点，你必须只iframe的HTML调用后的init（）。因此，它看起来是这样的：
<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的一个无形的层 需要的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做到这一点。
如发现有：使用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');
}
})
根据保罗·德雷珀的答案，我创建了一个解决方案，连续工作，当你有I帧，在浏览器中打开另一个选项卡。当您返回的页面继续积极地检测到点击过的框架，这是一个很常见的情况：
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();
}
});
代码简单，模糊事件检测失去焦点的被点击的iframe时，和测试，如果有源元件是一个IFRAME（如果你有几个IFRAME你可以知道谁被选中），这种情况是经常当你有宣传帧。
在第二事件触发时，返回到页的聚焦方法。使用它的可见性改变事件。
这是解决方案使用建议的方法与悬停+模糊和主动元件的技巧，没有任何库，只是纯粹的js。作为FF/铬。大多approache是一样@穆罕默德*拉德旺建议，除非我用不同的方法拟议通过@zone117x跟踪框架点击FF，因为 窗口。重点 不是工作没有外 用户设置:
请求把窗户前面。它可能会失败 用户设置和窗口并不能保证以最前面之前 这种方法返回。
这里是化合物的方法：
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 );
});
