Détecter un clic dans une iframe
Codeur61 Le 14 avril 2017 à 16:12 (Édité le 25 janvier 2019 à 17:53)
Mais voila.
Ma régie publicitaire à l'incentive ne propose que des publicités aux cliques.
Du coup je veux mettre en place une iframe.
Dans cette iframe on détecte quand un membre clique sur un lien de le page. (je parle pas d'un clic dans le background de l'iframe mais bien d'un clic sur un lien du site.
Ensuite quand le membre à cliqué sur un lien j'affiche une div.
J'ai dégoté quelque script sur le web mais c'est pas exactement se que je cherche. Et ne sachant pas codé le javascript bah je poste pour demandé une up d'un code.
Le premier code trouvé sur ce site.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tracker les clics dans une iframe avec jQuery</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
<style>
body{background:#efefef; padding:15px 20px;}
.iframetrack{margin:20px 0;}
#consoleDebug{position:fixed; top:30px; right:30px; z-index:9999; background:rgba(0,0,0,0.3);}
#consoleDebug .alert{margin:20px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<p>Element actif : <span class="label" id="actif"></span></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam.</p>
<div class="iframetrack">
<iframe width="500" height="500" src="http://avenue2blog.fr" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
</div>
<p>Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh.</p>
<div id="consoleDebug"></div>
</body>
</html>
<script type="text/javascript">
jQuery(document).ready(function($){
// Affichage de l'élément actif (pour aider à comprendre ce qui se passe)
setInterval(function(){
$('#actif').text(document.activeElement.tagName);
}, 100);
// Initialisation variable
iframe_survol = false;
// Surveillance frontière
$('.iframetrack iframe').mouseover(function(){
iframe_survol = true;
}).mouseout(function(){
iframe_survol = false;
});
// On donne le focus à la fenêtre au chargement
$(window).focus();
// Ecoute blur
$(window).blur(function(e){
$('<div class="alert alert-info">').html("Clic sur l'iframe").appendTo('#consoleDebug').delay(3000).fadeOut();
});
// Retour du focus sur la page au survol
$(document).mousemove(function(e){
if( document.activeElement.tagName == 'IFRAME' ){
$(window).focus();
}
});
});
</script>
Seul bémol, le bloc pour nous dire qu'on a bien cliqué sur l'iframe ne peut pas être une div car il disparait au bout de quelque seconde. Il faudrait donc qu'il soit statique sur la page pour que je puisse affiché ma div.
Mais aussi, ce que je veux faire, c'est que le membre clique sur un lien pour qu'on affiche la div.
Or la, il comptabilise un clic même dans la zone de l'iframe entière.
Merci pour vos réponses.
coucougael94 Le 4 juin 2017 à 14:06 (Édité le 4 juin 2017 à 14:09)
coucougael94 Le 28 juin 2017 à 12:31 (Édité le 28 juin 2017 à 12:35)
Tout d'abord, ton lien ne seras qu'une simple ancre, contenant un lien.
Ensuite, dès que l'iframe change d'ancre (donc de src), il vient d'y avoir un clic.
Enfin, tu récupère le nouveau src, et après avec indexOf et substring, tu ne récupère que l'adresse dans l'ancre.
