Détecte des clicks dans une page

**zooffy** · 28/03/2011, 14h55

Bonjour tout le monde.

J'ai un vrai problème de conception sur ce coup là.

Je dois fare une site qui affiche un "espace" utilisateur. Dans cette espace je doit faire apparaitre une "frame" (que je mets entre guillement parce que je ne suis pas sur que se soit cela qu'il faut utiliser) qui affihce un site distant.
il faut que je puisse compter les clicks que l'utilisateur fait dans cette "frame" et l'afficher dans l'espace utilisateur et le tout toujours visible.

Je ne sais pas quel contrôle utiliser pour réaliser cette opération.

Auriez vous une diée ?

**calagan99** · 28/03/2011, 15h10

Salut Zooffy,

je ne comprends pas bien quel est le besoin dans ton cas, mais une chose est sure : tu ne pourras pas, par des moyens "normaux", contrôler ce qui se passe dans la frame.
La frame est une page à part entière et la page qui l'héberge n'a pas accès à son contenu.

Sauf à passer par de la bidouille js qui ne garantira rien, je ne vois pas très bien.

Peux-tu détailler ton besoin ?

**tomlev** · 28/03/2011, 15h50

Je crois que c'est possible avec jQuery (je crois seulement, vu que je ne l'ai jamais utilisé). En gros l'idée est de récupérer la frame dans le DOM, et de s'abonner à l'évènement click dessus

cf. cette question sur StackOverflow:
http://stackoverflow.com/questions/2...dy-doesnt-work

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

Merci tomlev pour ton lien.
Faut que j'y retourne plus en profondeur, c'est super compliqué à comprendre pour moi à cause de l'anglais dans un premier temps (mais je crois avoir catpé) et surtout à cause du JS que je ne maitrise pas du tout. Mais bon, je vais faire des efforts et explorer à fond cette possibilité.

Pour détailler un peu plus mon besoins et c'est pour ça que j'avais mis "frame" entre guillemet, car peut-être un autre contrôle est plus approprié.

Je ne souhaite pas connaitre TOUT ce qu'il se passe dans la "frame" (toujours entre guillemets) mais seulement les click.

Je vais tenter une présentation plus générale :
- sur mon site un utilisateur se connecte
- dans son espace on lui propose un lien.
- ce lien le dirige vers une page où il retrouve une partie de son espace et surtout un compteur de click et dans le reste de la page il voit un autre site. Là il faut trouver un contrôle qui affiche un autre site (frame, iframe, literal, je ne sais quoi d'autre)
- cet utilisateur doit cliquer dans cet autre site pour activer son compteur, chaque click dans l'autre site lui donnera un de plus sur son compteur. Ensuite je fais des trucs (pas trop cochon) avec le compteur.

Est ce que c'est plus clair comme ça ?

Donc, Frame ou autre, je n'y suis pas attaché, mais un contrôle qui affiche un site et qui me retourne les clicks qui sont fait dedans. Au pire, si je n'ai que le premier click, ça me suffit. je veux juste être sûr que le gars à bien cliqué, c'est tout.

Dans le même ordre d'idée j'ai vu un site qui fait des trucs pas possible sur ce genre de chose :
http://www.pokcity.com/ ils ont un système pour avoir des "poks sponsorisés" et ils passent par sponsorpay (http://fr.sponsorpay.com/)
Visiblement on rempli des formulaires, on regarde des vidéos, on clique des pub et sponsorpay arrive à détecter tout ça.
Voilà, en gros ce que je voudrais faire, mais je commence par détecter un click, ne voyons pas trop gros.
Merci pour votre aide.

**zooffy** · 28/03/2011, 16h52

Je crois que je tiens une piste, mais mon nieau de javascript m'empêche de continuer.

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
 
<%@ 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="iframe" src="http://www.google.fr" onload="mafonc();"></iframe>
 
    </div>    
    </form>
</body>
</html>

Je fais apparaitre une msgBox à chaque changement de page dans la Iframe.
Là où je sèche c'est que je ne sais pas quoi mettre dans mafonc pour déclencher une traitement serveur.

Question subsidiaire : serait il possible de récupérer l'URL de la Iframe à chaque fois ?

**calagan99** · 29/03/2011, 13h00

Zooffy,

là tu détectes que ton iframe a été chargée côtée client. C'est bien, mais tu n'es pas rendu au clic

Cela dit, le code proposé dans le lien de TomLev a l'air pas mal.

Pour ce qui est de ton besoin de récupérer le clic côté serveur, regarde du côté de ClientScript.GetPostBackEventReference.

Le principe est le suivant :
- tu déclares un LinkButton visible=false sur ton aspx
- tu t'abonnes à s'on évènement OnClick(sender As Object, e As EventArgs)
(c'est dans cet event que tu feras ton traitement serveur après clic.)
- tu écris un petit script js, à charger en début de page, qui va appeler le clic serveur du linkbutton caché.

Un peu de code pour illustrer :
ASPX :

Code :

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

<asp:LinkButton ID="LB1" runat="server" Style="display: none;" OnClick="LB1_Click" ></asp:LinkButton>

VB :

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
Sub Page_Load(ByVal Sender As System.Object, ByVal e As System.EventArgs) 
 Me.InitScript()
End Sub
 
Private Sub InitScript()    
    Dim script as string = string.Format(" 
            function mafonc()
            {{
                {2};
            }}",
ClientScript.GetPostBackEventReference(LB1, ""))
End Sub 
 
Sub LB1_Click(sender As Object, e As EventArgs) 
         'Ici ton code après récupération du clic
End Sub

Bon, le code est à adapter car écrit en VB (je n'ai pas pratiqué depuis un moment) et pas vérifié.
Mais le principe y est :
- au chargement de ta page, tu charges ta fonction "maFonc"
- cette fonction est appelée sur l'event client onload de ton iframe
- dans cette fonction, on appelle explicitement une fonction doPostback depuis le linkbutton caché
- ainsi, tu passeras dans son event Click côté serveur.

Edit : si j'ai fais des erreurs dans mon code, je suis preneur de tes corrections

**zooffy** · 29/03/2011, 13h51

Merci beaucoup pour ton aide.

J'ai recopié ton exemple de code et j'ai tenté de lancer tel que.
J'ai trouvé une erreur sur le {2} dans la fonction JS, j'ai mis 0 à la place et y a plus d'erreur.

Par contre, cela ne fait rien du tout
Pour faire les tests j'ai mis une procédure de logage de mon cru dans le OnClick du LinkButton et rien ne passe par là, comme si l'évènement ne se déclanchait pas.

L'ennui c'est que même en lisant et relisant le lien de Tomlev ou celui que tu m'a donné, je ne comprends pas.
J'ai suivi ton raisonnement tel que tu l'explique et je vois bien le cheminement mais je n'arrive pas à le traduire en code.

Tu vois d'où cela pourrait venir ?
Sinon, écrit le C#, si tu sais le faire dans ce langage, je traduirais.

**calagan99** · 29/03/2011, 14h07

En effet, il fallait remplacer {2} par {0}.
J'ai oublié une toute petite chose... ajouter le script à la page...

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
Sub Page_Load(ByVal Sender As System.Object, ByVal e As System.EventArgs) 
 Me.InitScript()
End Sub
 
Private Sub InitScript()    
    Dim script as string = string.Format(" 
            function mafonc()
            {{
                {2};
            }}",
ClientScript.GetPostBackEventReference(LB1, ""))
ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "iframeScript", script, True);
End Sub 
 
Sub LB1_Click(sender As Object, e As EventArgs) 
         'Ici ton code après récupération du clic
End Sub

Avec le "RegisterClientScriptBlock", tu inscriras le script sur la page.

**zooffy** · 29/03/2011, 14h37

Ok, y a un truc qui marche, mais le résultat est inatendu.

Mais avant, je vais donner tout le code pour partir sur des bonnes bases
CodeBehind :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
        Me.InitScript()
    End Sub
 
    Private Sub InitScript()
        Dim script As String = String.Format(" function mafonc(){{{0}; }}", ClientScript.GetPostBackEventReference(LB1, ""))
        ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "iframeScript", script, True)
    End Sub
 
    Sub LB1_Click(ByVal sender As Object, ByVal e As EventArgs)
        'Ici ton code après récupération du clic
        Logage("j'ai un click")
    End Sub

Code HTML :

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
 
<%@ 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>
</head>
<body>
    <form id="form1" runat="server">
    <ajax:ScriptManager ID="sm" runat="server"></ajax:ScriptManager>
    <div>
    Compteur
    <asp:LinkButton ID="LB1" runat="server" Style="display: none;" OnClick="LB1_Click" ></asp:LinkButton>
    <iframe id="maframe" name="nmaframe" src="http://www.google.fr" width="100%" height="600" ></iframe>
 
    </div>    
    </form>
</body>
</html>

Dans cette version de code, il ne se passe rien.
Mais si je rajoute un onload sur la Iframe tel que ça :

Code :

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

<iframe id="maframe" name="nmaframe" src="http://www.google.fr" width="100%" height="600" onload="mafonc();" ></iframe>

Il part en boucle infinie et j'ai bien un logage qui se fait dans mon fichier texte de test

Donc, c'est que ça fonctionne.

Maintenant, faudrait le moyen qu'il ne boucle pas et là, je creuse mais je trouve pas.

Est il possible, du même coup, de récupérer l'URL complète qui nourri la Iframe, à chaque clic dedans ?

**calagan99** · 29/03/2011, 15h07

Oui, je ne l'ai pas précisé, mais il faut que tu laisses l'appel à maFonc sur le onload de ta frame.
Pour la boucle, je ne vois pas bien.
On peut se lancer dans du js de la mort à base de PageRequestManager ou plus simplement avec JQuery, mais faire tout ça sans s'assurer que tu pourras faire ce dont tu as réellement besoin derrière est un poil risqué.

Pour moi, puisque tu risques d'avoir besoin de JQuery après, le mieux est quand même :
- d'inclure JQuery dans ta page :

Code :

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

- d'essayer, avec JQuery, de capter le click dans la frame)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
        Me.InitScript()
    End Sub
 
    Private Sub InitScript()
        Dim script As String = String.Format("$('#maFrame').bind('click', function() {{{0} }});", ClientScript.GetPostBackEventReference(LB1, ""))
        ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "iframeScript", script, True)
    End Sub
 
    Sub LB1_Click(ByVal sender As Object, ByVal e As EventArgs)
        'Ici ton code après récupération du clic
        Logage("j'ai un click")
    End Sub

Cela dit, encore une fois, c'est plus qu'hasardeux, d'autant plus avec une frame sur un autre domaine.

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

Bon, j'ai pas encore compris comment fonctionne JQuery.

J'ai copier le code que tu donnes et j'ai un message d'erreur JS : objet attendu.

Lorsque je regarde le souce de la page, à la ligne qu'il m'indique je vois la Iframe.

Je me demande si ce n'est pas le OnLoad qui déconne.
Par ailleurs j'ai tenté une petite correction dans ton code.
De :

Code :

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

$('#mafFrame')

je suis passé à ça :

Code :

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

$('#maframe')

Je me suis dit que JS était CaseSensitive et donc que ma Frame ne serait pas reconnue, mais je me suis peut-être trompé.

J'ai également essayé de déplace le Me.InitScript() du Load de la Page vers le Init de la page en me disant qu'il arrivait peut-être trop tard, mais pareil, même mesasge d'erreur

Là, visiblement, il lui manque quelque chose, mais il n'est pas trés explicite.

Détecte des clicks dans une page

ASP.NET

Discussions similaires

Partager

Partager