Récupérer les clicks dans une Iframe

Version imprimable

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:

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 ?

28/03/2011, 22h07
nadox

Bonsoir,

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

Merci pour ton aide.

Et pour l'URL de la Iframe, un tuto ?
29/03/2011, 09h02
nadox
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:

1 2 3 var url = window.frames[iframeName].location; // ou var url = document.getElementById(iframeId).src
29/03/2011, 09h13
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 ...

Merci pour ton aide.

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

Avec ce code là :

Code:

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é.

29/03/2011, 09h19
zooffy

Citation:

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.
29/03/2011, 09h28
nadox
Code:

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 8O !
29/03/2011, 09h46
zooffy

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 ?
29/03/2011, 10h17
nadox

Citation:

Envoyé par nadox

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

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

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:

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>

29/03/2011, 14h45
nadox
Je n'avais pas bien compris ce que tu voulais faire au départ... :oops:

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:

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.
29/03/2011, 15h02
zooffy

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 ?
29/03/2011, 15h12
nadox

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).
29/03/2011, 15h18
laurentg2003

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
29/03/2011, 16h12
zooffy

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à.

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:

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...

29/03/2011, 17h34
Willpower

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. :mrgreen:
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 8-)

Citation:
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:

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 ! :ccool:

29/03/2011, 19h22
zooffy

Citation:

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.
29/03/2011, 19h29
nadox

De rien !
Si l'url devient indispensable pour ton client, il faudra passer par une mécanique beaucoup plus lourde à base de proxy, comme le suggère Willpower.

@Nadox, juste pour être sûr (n'étant pas familier à mort du JS), aurais tu l'amabilité de me confirmer le comportement suivant avec le code que je poste en fin de message :

- la page se charge et enregistre un premier load de la Iframe mais je ne déclenche pas la requête XmlHttpRequest
- le visiteur clique dans la Iframe et redéclenche le load de la Iframe et là, déclenche la requête XmlHttpRequest et exécute la page de destination frame.aspx
- le visiteur reclique autant de fois qu'il veut dans la Iframe mais ne redéclenche plus du tout la requête XmlHttpRequest

J'ai gérer le chargement du load avec la variable passage en début de script.

Merci d'avance.

Code:

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
 
<%@ 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'>
        var passage = 0;
        function getXhr() {
            var xhr = null;
            if (window.XMLHttpRequest) // Firefox et autres
                xhr = new XMLHttpRequest();
            else if (window.ActiveXObject) { // Internet Explorer 
                try {
                    xhr = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
            }
            else { // XMLHttpRequest non supporté par le navigateur 
                alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
                xhr = false;
            }
            return xhr
        }
        /**
        * Méthode qui sera appelée sur le click du bouton
        */
        function go() {
            var xhr = getXhr()
            // On défini ce qu'on va faire quand on aura la réponse
            xhr.onreadystatechange = function() {
                // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                if (xhr.readyState == 4 && xhr.status == 200) {
                    //alert(xhr.responseText);
                }
            }
            if (passage == 1) {
                xhr.open("GET", "/frame.aspx", true);
                xhr.send(null);
            }
            passage++;
        }
		</script>
</head>
<body>
    <form id="form1" runat="server">
    <ajax:ScriptManager ID="sm" runat="server"></ajax:ScriptManager>
    <div>
    Compteur
    <iframe id="maframe" name="nmaframe" src="http://www.google.fr" width="100%" height="600" onload="go();" ></iframe>
    </div>    
    </form>
</body>
</html>

Oui, c'est bien le comportement que devrais obtenir.
Je dirais même :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
	function go() {
		if (passage == 1) {
			var xhr = getXhr();
			// On défini ce qu'on va faire quand on aura la réponse
			xhr.onreadystatechange = function() {
				// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
				if (xhr.readyState == 4 && xhr.status == 200) {
					//alert(xhr.responseText);
				}
			}
			xhr.open("GET", "/frame.aspx", true);
			xhr.send(null);
		}
		passage++;
	}

30/03/2011, 16h27
zooffy

Merci pour cette correction.
Je me suis posé la question et je n'ai pas osé le faire.

@ la prochaine