Comment générer un évènement javascript lors du clic sur une iframe externe ?

kent1_123 · 28/06/2011, 14h16

Bonjour,

Comme indiqué dans le sujet du message, je cherche à déclencher un évènement JavaScript (en l’occurrence l'évènement onclick) lors du clic d'un internaute sur une iframe externe présente sur mon site.
- le décompte de ces clics me permettra de réaliser une page statistique -

Pour définir le contexte, je diffuse des publicités d'une certaine régie publicitaire. Les bannières publicitaires sont diffusées grâce à un script JavaScript qui génère une iframe.

J'ai pensé mettre une div autour du script et lui attribuer un évènement onclick mais cela ne fonctionne pas.

Je reste à votre disposition pour de plus amples informations.

Cordialement Quentin.

kent1_123 · 29/06/2011, 10h04

Quelques précision sur ce projet étant données qu'une réponse m'a été donnée sur un autre forum :

- J'ai déjà essayé plusieurs heures avec toutes sortes d'évènements et de div transparentes par dessus.
- L'idée de la div transparente qui compte le clic fonctionne bien sur toutes les bannières mis à part les iFrames.

Quelqu'un aurait-t-il une solution à me proposer SVP ?
Peut-être connaisez-vous un site qui décompte les clics notamment ceux de adsense par exemple ?

Quentin.

Watilin · 29/06/2011, 20h50

Les iframes et les frames sont une vieille technologie, toujours délicate à manipuler avec les CSS et les techniques de script « récentes » comme les gestionnaires d'évènements. En l'occurence, tu ne peux pas faire passer une évènement de l'extérieur vers l'intérieur d'une iframe, ni réciproquement.

Techniquement, le contenu de l'iframe est géré en JavaScript par un objet window différent ; c'est exactement comme s'il s'agissait d'une fenêtre différente (ou un onglet différent).

Par contre, si c'est toi qui contrôles le contenu de l'iframe, tu peux utiliser window.parent pour manipuler les éléments de la page parente. Par exemple :

Fichier doc1.html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>Document parent</title>
</head>
<body>
 
<h1>Document parent</h1>
<iframe src="doc2.html"></iframe>
<p id="compteur">0</p>
 
</body>
</html>

Fichier doc2.html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<title>Document enfant</title>
<script type="text/javascript">
 
window.addEventListener('click', function() {
	var $compteur = parent.document.getElementById('compteur'); 
	var cpt = $compteur.innerHTML * 1;
	$compteur.innerHTML = cpt + 1;
}, false);
 
</script>
</head>
<body>
 
<h1>Document enfant</h1>
 
</body>
</html>

Si c'est un site partenaire qui décide du contenu de l'iframe, alors la réponse est simple : tu ne peux rien faire. Désolé :/

kent1_123 · 30/06/2011, 13h20

Merci pour votre réponse.

C'est bien une iframe externe à mon site puisqu'elle me permet de diffuser des publicités d'une régie.
Donc selon ce que tu affirme je ne peux pas agir dessus.

En revanche j'ai trouvé ceci sur un autre forum si ça peux aider quelqu'un :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
    <?php
    $titre = "Ajouter - Google Tracker French Adsense";
    require_once("session.php");
    require_once("header.php");
    if (!isset($_GET['type']) OR (intval($_GET['type']) != 2 AND intval($_GET['type']) != 3))
    {
    ?>
    <h1>Ajouter un site</h1>
    <p><a href="ajouter.php?type=2">Cliquez içi pour ajouter un site.</a></p>
    <h2>Ajouter une annonce</h2>
    <p><a href="ajouter.php?type=3">Cliquez içi pour ajouter une annonce et obtenir le code javascript à placé sous le code google adsense.</a></p>
    <?php
    }
    if (isset($_GET['type']) AND intval($_GET['type']) == 2 AND !isset($_GET['formulaire']))
    {
    ?>
    <h1>Ajouter un site</h1>
    <p><form action="ajouter.php?type=2&amp;formulaire=1" method="post" />
    Nom du site: <input type="text" name="nom" /><br /><br />
    Courte description: <input type="text" name="description" /><br /><br />
    <input type="submit" name="submit" value="Ajouter le site" />
    </p>
    <?php
    }
    if (isset($_GET['type']) AND intval($_GET['type']) == 2 AND isset($_GET['formulaire']))
    {
    $nom = htmlspecialchars(addslashes($_POST['nom']));
    $description = htmlspecialchars(addslashes($_POST['description']));
    $insert = $bd->query("INSERT INTO gaft_site VALUES('', '".$nom."', '".$description."')");
    ?>
    <h1>Ajouter un site</h1>
    <p>Le site a été ajouté avec succès à la base de donnée.</p>
    <?php
    }
    if (isset($_GET['type']) AND intval($_GET['type']) == 3 AND !isset($_GET['formulaire']))
    {
    ?>
    <h2>Ajouter une annonce</h2>
    <p><form action="ajouter.php?type=3&amp;formulaire=1" method="post" />
    Site: <select name="site">
    <?php
    $select = $bd->query("SELECT noms, id FROM gaft_site ORDER BY id ASC");
    while ($s = $bd->fetch_array($select))
    {
    $nom = stripslashes($s['noms']);
    $id_site = intval($s['id']);
    ?>
    <option value="<?php echo $id_site; ?>"><?php echo $nom; ?></option> <?php
    }
    ?>
    </select><br /><br />
    Nom: <input type="text" name="nom" /><br /><br />
    Endroit où est placer l'annonce: <input type="text" name="description" /><br /><br />
    Format: <select name="format">
    <option value="Leaderboard (728 x 90)">Leaderboard (728 x 90)</option>
    <option value="Bannière (468 x 60)">Bannière (468 x 60)</option>
    <option value="Demi-bannière (234 x 60)">Demi-bannière (234 x 60)</option>
    <option value="Bouton (125 x 125) ">Bouton (125 x 125) </option>
    <option value="Skyscraper (120 x 600)">Skyscraper (120 x 600)</option>
    <option value="Skyscraper large (160 x 600)">Skyscraper large (160 x 600)</option>
    <option value="Petit rectangle (180 x 150)">Petit rectangle (180 x 150)</option>
    <option value="Bannière verticale (120 x 240)">Bannière verticale (120 x 240)</option>
    <option value="Rectangle moyen (300 x 250)">Rectangle moyen (300 x 250)</option>
    <option value="Carré (250 x 250)">Carré (250 x 250)</option>
    <option value="Grand rectangle (336 x 280)">Grand rectangle (336 x 280)</option>
    </select>
    <br /><br />
    Couleur du fond: <input type="text" name="couleur_fond" /><br /><br />
    Couleur du texte: <input type="text" name="couleur_texte" /><br /><br />
    Couleur de la bordure: <input type="text" name="couleur_bordure" /><br /><br />
    <input type="submit" name="submit" value="Ajouter l'annonce" />
    </p>
    <?php
    }
    if (isset($_GET['type']) AND intval($_GET['type']) == 3 AND isset($_GET['formulaire']))
    {
    $nom = htmlspecialchars(addslashes($_POST['nom']));
    $description = htmlspecialchars(addslashes($_POST['description']));
    $format = htmlspecialchars(addslashes($_POST['format']));
    $site = htmlspecialchars(addslashes($_POST['site']));
    $couleur_fond = htmlspecialchars(addslashes($_POST['couleur_fond']));
    $couleur_texte = htmlspecialchars(addslashes($_POST['couleur_texte']));
    $couleur_bordure = htmlspecialchars(addslashes($_POST['couleur_bordure']));
    $time = time();
    $insert = $bd->query("INSERT INTO gaft_annonce VALUES('', '".$nom."', '".$description."', '".$site."', '".$format."', '".$couleur_fond."', '".$couleur_texte."', '".$couleur_bordure."', '".$time."')");
    $select = $bd->query("SELECT id FROM gaft_annonce WHERE dates = '".$time."' LIMIT 1");
    while ($i = $bd->fetch_array($select))
    {
    $id_annonce = intval($i['id']);
    }
    $url = $adresse."log.php";
    $javascript = htmlspecialchars("<script language=\"javascript\" type=\"text/javascript\">
    <!--
    function log()
    {
    bug = new Image();
    bug.src = '$url?ref='
    + document.location
    + '&url=' + window.status
    + '&id=$id_annonce';
    }
    var elements;
    elements = document.getElementsByTagName(\"iframe\");
    for (var i = 0; i < elements.length; i++) {
    if ((elements[i].src.indexOf('googlesyndication.com') > -1) || (elements[i].src.indexOf('googleadservices.com') > -1)) { elements[i].onfocus = log; }
    }
    //-->
    </script>");
    ?>
    <h2>Ajouter une annonce</h2>
    <p>L'annonce a été ajoutée avec succès à la base de donnée.<br /><br />
    Pour que le logiciel prenne en compte vos clics il faut que vous placiez ce code javascript en dessous du code javascript pour google adsense, vérifiez au passage que l'adresse indiquée entre guillemets simples (' ') dans le code javascript après "bug.src =" est bien celle qui mène au fichier log.php du logiciel:<br /><br />
    <span class="code"><?php echo nl2br($javascript); ?></span></p>
    <?php
    }
    require_once("footer.php");
    ?>

28/06/2011, 14h16	#1
kent1_123 Invité de passage quentin schneider Inscription : janvier 2011 Messages : 9 Détails du profil Informations personnelles : Nom : quentin schneider Informations forums : Inscription : janvier 2011 Messages : 9 Points : 0 Points : 0	Comment générer un évènement javascript lors du clic sur une iframe externe ? Bonjour, Comme indiqué dans le sujet du message, je cherche à déclencher un évènement JavaScript (en l’occurrence l'évènement onclick) lors du clic d'un internaute sur une iframe externe présente sur mon site. - le décompte de ces clics me permettra de réaliser une page statistique - Pour définir le contexte, je diffuse des publicités d'une certaine régie publicitaire. Les bannières publicitaires sont diffusées grâce à un script JavaScript qui génère une iframe. J'ai pensé mettre une div autour du script et lui attribuer un évènement onclick mais cela ne fonctionne pas. Je reste à votre disposition pour de plus amples informations. Cordialement Quentin.
	00

29/06/2011, 10h04	#2
kent1_123 Invité de passage quentin schneider Inscription : janvier 2011 Messages : 9 Détails du profil Informations personnelles : Nom : quentin schneider Informations forums : Inscription : janvier 2011 Messages : 9 Points : 0 Points : 0	Quelques précision sur ce projet étant données qu'une réponse m'a été donnée sur un autre forum : - J'ai déjà essayé plusieurs heures avec toutes sortes d'évènements et de div transparentes par dessus. - L'idée de la div transparente qui compte le clic fonctionne bien sur toutes les bannières mis à part les iFrames. Quelqu'un aurait-t-il une solution à me proposer SVP ? Peut-être connaisez-vous un site qui décompte les clics notamment ceux de adsense par exemple ? Quentin.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email