Récupérer les clicks dans une Iframe

**zooffy** · 28/03/2011, 17h00

Bonjour à tous

Mon niveau en javascript n'est pas trés bon et donc je sèche sur un truc, peut-être un peu complexe.

Je programme un site asp.net et je dois faire une page dans laquelle j'affiche un tableau de bord et un site distant.

Pour cela j'ai opté pour cette version de code :

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
 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
        function mafonc() {
            alert('mafonc : ');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ajax:ScriptManager ID="sm" runat="server"></ajax:ScriptManager>
    <div>
    Compteur
    <iframe id="maframe" src="http://www.google.fr" onload="mafonc();"></iframe>
 
    </div>    
    </form>
</body>
</html>

L'idée est de récupére chaque click de l'utilisateur et de déclencher un traitement serveur pour alimenter un compteur dans le tableau de bord.
Mon souci actuel est que je ne sais pas comment déclencher un traitement serveur dans mafonc().

Ensuite, j'aimerais récupérer l'URL complète qui alimente la Iframe à chaque clic mais je ne sais pas si c'est possible.

Pourriez vous m'aider ?

**nadox** · 28/03/2011, 22h07

Bonsoir,

Pour effectuer un traitement côté serveur sur un clic, il faut utiliser une requête AJAX.
http://ajax.developpez.com/cours/

**zooffy** · 29/03/2011, 08h04

Merci pour ton aide.

Et pour l'URL de la Iframe, un tuto ?

**nadox** · 29/03/2011, 09h02

Je ne suis pas sûr d'avoir compris ce que tu veux faire avec l'iiframe, mais tu peux accéder à son url de deux façon.

Code javascript :

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

1
2
3
var url = window.frames[iframeName].location;
// ou
var url = document.getElementById(iframeId).src

**SpaceFrog** · 29/03/2011, 09h13

Vu que le site dans l'iframe est distant donc a priori pas sur le même domaine, pas sur que tu puisses récupérer les clicks dans l'iframe ...

**zooffy** · 29/03/2011, 09h18

Merci pour ton aide.

Visiblement, je ne suis pas doué en javascript parce qu'il me retourne une erreur.

Avec ce code là :

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
 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
        function mafonc() {
            var url = document.getElementById(maframe).src
            alert('mafonc : ' + url);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ajax:ScriptManager ID="sm" runat="server"></ajax:ScriptManager>
    <div>
    Compteur
    <iframe id="maframe" src="http://www.google.fr" onload="mafonc();"></iframe>
 
    </div>    
    </form>
</body>
</html>

Il ne m'affiche pas la msgbox que j'attend et me dit : "objet requis".

Et je ne vois pas bien où je me suis planté.

**zooffy** · 29/03/2011, 09h19

Envoyé par SpaceFrog

Vu que le site dans l'iframe est distant donc a priori pas sur le même domaine, pas sur que tu puisses récupérer les clicks dans l'iframe ...

Mise à part la récupération de l'URL, à chaque click que je fais j'ai la msgbox qui apparait. ça me suffit pour récupérer le click.

**nadox** · 29/03/2011, 09h28

Code javascript :

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

1
2
3
var url = window.frames["iframeName"].location;
// ou
var url = document.getElementById("iframeId").src

Par contre je vois pas où tu as une message box, et où on clic pour l'afficher

!

**zooffy** · 29/03/2011, 09h46

Merci avec les guillemets ça marche.

Pour revenir sur l'URL je récupère la même chose à chaque page (pour l'exemple : www.google.fr.

J'aurais voulu l'URL complète, avec toute la queryString.
Y aurait pas un truc à préciser en plus pour avoir tout ?

**nadox** · 29/03/2011, 10h17

Envoyé par nadox

Par contre je vois pas où tu as une message box, et où on clic pour l'afficher

!

On peut voir le code HTML et Javascript généré ?

**zooffy** · 29/03/2011, 10h42

Désolé, j'ai répondu trop vite, j'ai zappé ta question subsidiaire.

La msgbox est dans la fonction (le alert si tu préfère).

Voici le code généré

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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
	Untitled Page
</title>
    <script type="text/javascript">
        function mafonc() {
            var url = document.getElementById("maframe").src
            alert('mafonc : ' + url);
        }
    </script>
</head>
<body>
    <form name="form1" method="post" action="test.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTY0Mzg3MTY0M2RkClFx2CpeSa8MGP0O+++kPLgmvM8=" />
</div>
 
<script type="text/javascript"> 
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
 
 
<script src="/WebResource.axd?d=3X9ZcjVj-WFwdZLppK545el3of_H8SFzVTjNK3Iuv7n2QlKXRmOEam8dBBJ5Eq4c-WTKbB2uKjARuRnP0hugo8TbXoo1&amp;t=634208850757546466" type="text/javascript"></script>
 
 
<script src="/ScriptResource.axd?d=tyGWzr1-TkXyh5iSD3Fo0loE_Nan6tEsgkdb8MW80PWcUwDzri6im47NW74Xu7MXpbNJK-tXwThSIpdGEyBvIVjuFDyuKpIpi0Culf5bqCBSVdnHqcTgJkzuBckcFKjThRSCKkeIHsBTQbhEmgxxpCT3nOAMIwt7rWDIOShmn8qeZx3B0&amp;t=5c2f384e" type="text/javascript"></script>
<script type="text/javascript"> 
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('Échec du chargement de l\u0027infrastructure ASP.NET Ajax côté client.');
//]]>
</script>
 
<script src="/ScriptResource.axd?d=jC_9VkIKZ71GetRZGqaSTDuKXfyWGy6iKGsNkxK2mnyrALqMrzXrPD2swZq-GRbOcU4xb9xFYzYrGKmdH6aRfoEjtdSyOuo5XVvERzwHhxWGvtXpjhaYNuxF4Ma781xzRG603dJ9ER_-Uzr10B5QAlsZ28712gshHvlCVeGDoGEjVSrr0&amp;t=5c2f384e" type="text/javascript"></script>
    <script type="text/javascript"> 
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('sm', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
 
    <div>
    Compteur
    <iframe id="maframe" name="nmaframe" src="http://www.google.fr" onload="mafonc();"></iframe>
 
    </div>    
 
 
<script type="text/javascript"> 
//<![CDATA[
Sys.Application.initialize();
//]]>
</script>
</form>
</body>
</html>

**nadox** · 29/03/2011, 14h45

Je n'avais pas bien compris ce que tu voulais faire au départ...

En fait, l'attribut src de l'iframe n'est pas modifié lors de la navigation à l'intérieur de l'iframe.
On peut accéder à l'url sur chaque changement de page dans l'iframe avec :

Code :

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

1
2
3
 
var url = document.getElementById("iframeId").contentWindow.location
var querystring = document.getElementById("iframeId").contentWindow.search

Le seul inconvénient, c'est que c'est utilisable seulement dans le cas où la page contenu dans l'iframe est sur le même domaine que la page "conteneur".
Ce qui n'est pas ton cas avec google.

**zooffy** · 29/03/2011, 15h02

Ok, en gros c'est l'inconvénient majeur puisque c'est ce cas là précisément qui sera en place, Google ou un autre site, quoi qu'il arrive, ça en sera pas le même domaine.

Donc, c'est impossible ?
Si oui, simplement capter le fait que l'utilisateur ait cliqué dans la Iframe, c'est possible, à chaque click, je bien sûr parler de click qui change la page affichée ?

**nadox** · 29/03/2011, 15h12

Sans certitude absolue, je dirais que non, puisque la raison de cet inconvénient est qu'on ne peux pas accéder à ni modifier une iframe dans le domaine n'est pas le même(question de sécurité).
En gros, l'iframe devient une boite noire sur laquelle on ne peut pas agir (à part modifier les attributs de la balise iframe elle-même, tels que le src).

**laurentg2003** · 29/03/2011, 15h18

voilà 2 liens sur le cross domain justement pour accéder à des web services en toute honnêteté je précise :
http://blog.jaysalvat.com/article/co...-en-javascript

http://madskristensen.net/post/Ifram...ipt-calls.aspx

**zooffy** · 29/03/2011, 16h12

Merci Laurent pour tes liens.
Visiblement ça parle que de webservice, hors moi, je vais pointer sur des sites tout à fait standard et pas des webservice. Je ne vois donc pas comment je pourrais intégrer cela. Mais si tu as une idée je suis preneur.

@nadox : bon, ok, oublions l'URL en retour.
Est ce que je peux au moins être sûr qu'à chaque fois qu'un utilisateur va changer de "page" dans la Iframe il y aura un load de la Iframe ?

Si c'est le cas, je vais me contenter de la première fonction qui se déclenche sur load de la Iframe et là, avec un HttpWebRequest, je vais envoyer une requête serveur pour "compter" les clics fait dans le Iframe.

Mais j'ai besoins d'être sûr de coup là.

**nadox** · 29/03/2011, 16h27

Oui oui, l'évennement onload est équivalent à window.load dans le sens où il est déclenché à chaque chargement complet du document de l'iframe.
Par contre, il y aura une latence, et si l'utilisateur clique avant la fin du chargement de l'iframe, le click ne sera pas comptabilisé.

Tu peux tester cette page pour vérifier :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<style type="text/css">
	body, #maframe
	{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 400px;
	}
	</style>
    <script type="text/javascript">
    var count = 0;
	function mafonc() {
		count++;
		document.getElementById("div-count").innerHTML = 'nb de click dans l\'iframe : ' + count;
	}
    </script>
</head>
<body>
    <div id="div-count"></div>
    <div>
		<iframe id="maframe" name="nmaframe" src="http://www.google.fr/search?q=test" onload="mafonc();"></iframe>
    </div>    
</body>
</html>

Je n'ai aucun soucis sur firefox et chrome, par contre, je n'ai pas ie sous la main pour tester...

**Willpower** · 29/03/2011, 17h34

comme le dit nadog et spacefrog, il t'est impossible de récupérer les click dans l'iframe depuis la fenetre parente si c'est un domaine différent !

une fois que l'iframe a le focus, c'est comme si la fenetre autour était une autre page totalement indépendante comme dans un autre onglet par exemple. donc sans focus impossible de récupérer le moins events. (seule la frame a accès aux events).

tu n'es pas le premier geek a vouloir faire un navigateur dans un navigateur.

et la solution la plus proche est d'utiliser un proxy php par exemple, que tu pourras eventuellement mettre dans une iframe ou non. par exemple au lieu de visiter http://www.google.com/, tu auras http://www.monsite.com/index.php?url...ww.google.com/ et en php(ou autre langage coté serveur) tu devras récuperer le contenu de l'url (ici google) et générer une page avec un contenu identique (en modifiant les liens et les forms vers tonsite qui enverra a son tour les requete au serveur du vrai site). un truc dans le genre

**Willpower** · 29/03/2011, 17h36

Envoyé par nadox

Oui oui, l'évennement onload est équivalent à window.load dans le sens où il est déclenché à chaque chargement complet du document de l'iframe.
Par contre, il y aura une latence, et si l'utilisateur clique avant la fin du chargement de l'iframe, le click ne sera pas comptabilisé.

Tu peux tester cette page pour vérifier :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<style type="text/css">
	body, #maframe
	{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 400px;
	}
	</style>
    <script type="text/javascript">
    var count = 0;
	function mafonc() {
		count++;
		document.getElementById("div-count").innerHTML = 'nb de click dans l\'iframe : ' + count;
	}
    </script>
</head>
<body>
    <div id="div-count"></div>
    <div>
		<iframe id="maframe" name="nmaframe" src="http://www.google.fr/search?q=test" onload="mafonc();"></iframe>
    </div>    
</body>
</html>

Je n'ai aucun soucis sur firefox et chrome, par contre, je n'ai pas ie sous la main pour tester...

joli !

**zooffy** · 29/03/2011, 19h22

Envoyé par nadox

Oui oui, l'évennement onload est équivalent à window.load dans le sens où il est déclenché à chaque chargement complet du document de l'iframe.
Par contre, il y aura une latence, et si l'utilisateur clique avant la fin du chargement de l'iframe, le click ne sera pas comptabilisé.

Tu peux tester cette page pour vérifier :
Je n'ai aucun soucis sur firefox et chrome, par contre, je n'ai pas ie sous la main pour tester...

Le Geek te remercie.

Juste les Click ça sufira pour mon projet, enfin, j'espère que mon client s'en contentera. Aprés tout, il me considère comme un professionnel de 20 ans d'expérience et compte sur moi pour faire ça.

Maintenant, c'est vrai que j'ai plus l'habiude de faire des sites avec du lourd, des grosses base de donnée, des objets serveur en .NET en liaison direct avec des applications qui tourne en arrière plan sur le serveur lui même.

Du coup, me balader dans des frame, j'ai pas l'habitude.

Merci pour tout Nadox, je pense qu'on va pouvoir boucler le sujet.
Si une autre idée te venais, n'hésites pas.

Récupérer les clicks dans une Iframe

JavaScript

Discussions similaires

Partager

Partager