DÉTECTER UN CLIC SUR UN LIEN DANS UNE IFRAME
Bonjour,
J'ai un site PTC qui paye ses membres pour cliquer sur des publicités (pas de malwares virus ou tous les trucs merdique... bien sur).
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é un 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 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>Et en action ici sur mon site
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.
A bientôt !
6 réponses
Bonsoir.
Comment veux-tu que ton code javascript fonctionne sur le chargement de jQuery est bloqué ?
Mixed Content: The page at 'https://www.givecashptc.com/testclic.php' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'. This request has been blocked; the content must be served over HTTPS.
Uncaught ReferenceError: jQuery is not defined at testclic.php:26
Tu ne comprends pas ce que veut dire le message d'erreur ?
Tout simplement, que comme tu essaies de charger une ressource sur un serveur sans que le protocole soit sécurisé (http) depuis ton serveur qui a ule protocole sécurisé (https) le navigateur bloque ce chargement.
Par conséquent, comme la ressource (jQuery) n'est pas chargée, ton code javascript utilisant jQuery ne peut pas fonctionner.
Si si il fonctionnait. Je viens juste il y a 1 heure, de changer le protocole, mais ça fonctionné.
Si si il fonctionnait. Je viens juste il y a 1 heure, de changer le protocole, mais ça fonctionné.
Dans ce cas là modifies le lien du fichier en le passant en https au lieu de http.
Où si u ne veux pas t'embéter à devoir changer le protocole des fichiers externes selon le cas, supprimes le protocole de tes ressources externes, ce qui donnerait par exemple //ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js, le navigateur ajoutera automatiquement le protocole correspondant à ton site sur ces fichiers.
C'est fait, mais ça ne répond pas à mon problème maintnenant qu'on peut commencer. :P