simuler un clic

Version imprimable

23/04/2012, 15h25
skyser

simuler un clic

Bonjour, j'aimerai savoir comment simuler un clic en JavaScript, sur un lien pour que celui ci s'ouvre dans un nouvelle onglet sans qu'il soit bloqué par le navigateur.

Code:

<a id="monLien" href="#" onclick="window.open('monlien.php'+data); return false;">Texte du lien</a>

il faut qu'en javascript sans intervention de l'utilisateur le lien soit cliqué et par conséquent exécute le javascript.

Merci pour vos réponse
23/04/2012, 15h44
wenijah

Et le onLoad?
24/04/2012, 10h42
skyser

MDR, euh onload c est un évènement, quand une page ce charge !

Moi ce que j'aimerai, c est une solution pour que lorsque l'utilisateur arrive sur la page, un clique ce fait sur notre lien et de ce faite mon nouvelle onglet s'ouvre sans qu'il soit bloqué

Citation:

c est une solution pour que lorsque l'utilisateur arrive sur la page

Ne sois pas "MDR". La traduction de cette phrase en HTML c'est bien lors de l'événement onload().

Faire un onclick() sur un #id lors du onload :
Code:

1 2 3 4 5 6 7 8 9 <!DOCTYPE html> <html> <head> <title>test</title> </head> <body onload="document.getElementById('monLien').onclick();"> <a id="monLien" href="#" onclick="window.open('test.html'); return false;">Texte du lien</a> </body> </html>

Citation:

Et le onLoad?

Pour moi cela n'est pas une solution !
Dit comme ça, il est très improbable que j'en arrive à ce code beaucoup plus parlant :
Code:

1 2 3 4 5 6 7 8 9 <!DOCTYPE html> <html> <head> <title>test</title> </head> <body onload="document.getElementById('monLien').onclick();"> <a id="monLien" href="#" onclick="window.open('test.html'); return false;">Texte du lien</a> </body> </html>
d'où le "MDR"

24/04/2012, 13h34
Kaamo

ok. Par contre je ne vois pas pourquoi tu ne veux pas faire directement l'ouverture de la popup directement via le onload ?
24/04/2012, 17h08
Watilin

Citation:

Envoyé par Kaamo

Code:

<body onload="document.getElementById('monLien').onclick();">

Je savais pas qu'onclick était directement accessible sous forme de méthode. C'est standard ?

@skyser :
wenijah a peut-être manqué d'éloquence mais sa suggestion était tout à fait pertinente. Après tout, c'est à ça que sert un forum : donner des suggestions, des pistes. Si tu cherches simplement du code prêt-à-l'emploi, tu n'as pas frappé à la bonne porte :)
24/04/2012, 17h41
wenijah

Citation:

il faut qu'en javascript sans intervention de l'utilisateur le lien soit cliqué et par conséquent exécute le javascript.

Hmmm.

Citation:

cliquer, verbe intransitif
Sens : Appuyer sur la touche d'une souris d'ordinateur

Simuler un clic est donc impossible. Ce qui est possible en revanche, c'est d'émuler l'effet d'un clic. Pour émuler un clic, tu disposes du setTimeout ou du onLoad.

puisque tu ne veux pas passer par le onload
Code:

1 2 3 4 5 6 7 8 <script type="text/javascript"> fonction onClickFn() { window.open('test.html'); return false; }; onClickFn(); </script> <a id="monLien" href="#" onclick="return onClickFn();">Texte du lien</a>
mais je ne comprends pas pourquoi le onload ne te convient pas il est fait pour ça

A+JYT

24/04/2012, 18h22
Kaamo

@Watilin :

Oui, c'est standard depuis le début (les spéc DOM HTML lvl 1) je crois bien :mrgreen:
Mais uniquement pour les éléments <input> de type "Button", "Checkbox", "Radio", "Reset", ou "Submit".

Bien sûr, IE autorisait également le onclick() sur les autres éléments (lien par exemple) mais les autres navigateurs se limitaient aux éléments décrits par le standard. (enfin on pouvait contourner en passant par un createEvent et en utilisant initMouseEvent) donc finalement ils ont étendu cette méthode aux liens.

Depuis firefox 5.0 (> Gecko 5.0) et webkit de Chrome > 15 (à confirmer, je n'ai pas retrouvé la source), c'est étendu aux autres éléments selon les nouvelles spécifications HTML5 (d'après Mozilla).

Sources :
DOM-Level-1 (Methods > clic)
DOM-Level-2
Support Firefox > 5.0
24/04/2012, 19h25
NoSmoking

@Kaamo :

Citation:

Envoyé par Watilin

Je savais pas qu'onclick était directement accessible sous forme de méthode. C'est standard ?

je partage...

- onclick est un événement
- click est une méthode
donc il faut plutôt faire

Code:

<body onload="document.getElementById('monLien').click();">

@sekaijin :
que j'aurais aimé que function s'écrive fonction :aie:

Citation:

Envoyé par skyser

Bonjour, j'aimerai savoir comment simuler un clic en JavaScript, sur un lien pour que celui ci s'ouvre dans un nouvelle onglet sans qu'il soit bloqué par le navigateur.

essaies ne mettent une height et une width à ta fenêtre.
24/04/2012, 19h49
Watilin

Non, j'ai testé .onclick() et ça marchait, c'est bien pour ça d'ailleurs que ça m'intrigue. En revanche, je pense que c'est bien click tout court (l'action donc, pas l'évènement) qui date de DOM niveau 1 et qui ne devait concerner que les boutons et autres liens.
De plus, j'ai trouvé dans les specs de HTML5 une méthode onclick dans l'interface de HTMLElement, acompagné des nouveaux évènements liés à la gestion des médias, entre autres.
En somme, c'est un moyen rapide d'attacher un gestionnaire d'évènement. Mais apparemment, si on veut en attacher plusieurs, il faut toujours passer par addEventListener.

http://www.whatwg.org/specs/web-apps...k/#htmlelement
https://developer.mozilla.org/en/DOM/element.onclick
24/04/2012, 19h56
Bovino
Il n'y a en fait rien d'étonnant dans cette histoire de onclick(), même si je dois admettre que je ne l'avais jamais utilisé.

En effet, onclick, au-delà d'être un événement, est surtout une propriété d'un objet HTML à laquelle on affecte une fonction. Donc, comme pour toute propriété d'objet référençant une fonction, la notation
Code:

1 2 3 4 Object.propriete = function(){ //... }; Object.propriete()
est bien sensée exécuter la fonction associée ;)

Oula, bande de mécréants !
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 //création du "listener" d’évènement : $('test').onclick = function (e){ e = e || event alert(e) }; // cette ligne n'a pas du tout le même effet qu'un clique $('test').onclick(); // celles-ci bien : if($('test').click){ $('test').click(); } else{ var e = document.createEvent("MouseEvents"); e.initEvent('click',true,true); $('test').dispatchEvent(e); }
Le .onclick(); récupère la fonction assigné au "onclick" de notre élément "test" et l'exécute (avec le bon contexte/objet "test") mais n'a rien à voir avec une émulation de clique.

+1 Bovino (posté en même temps)

Citation:

Envoyé par Watilin

En somme, c'est un moyen rapide d'attacher un gestionnaire d'évènement. Mais apparemment, si on veut en attacher plusieurs, il faut toujours passer par addEventListener.

C'est vrai que beaucoup de sites "pros" semble utiliser ces méthodes, personnellement je préfère de loin utiliser onclick, facile d'utilisation et compatibles pour tous les navigateurs et pour passer plusieurs fonctions, il suffit de créer une fonction en appelant plusieurs.

Le seul cas où il peut être utile, c'est si on veut passer plusieurs fonctions ET en retirer(ou ajouter) en cours d'exécution, mais en général les sites qui en arrive à faire ce genre de choses, utilises bien souvent des frameworks (genre jquery qui permet une gestion des évènements) ou du moins une programmation orienté objet avancé où le DOM_object possède bien souvent un objet javascript qui lui est lié et contenant ses attribut, méthodes, évènements etc... Ainsi le simple onclick reste facilement utilisable :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function clickAlert1(){ alert("obj cliqué"); } function clickAlert2(){ alert("--- obj cliqué ---"); } element.arrayListenerClick = [clickAlert1,clickAlert2]; element.onclick = function(e){ for(var i=0;i<this.arrayListenerClick.length;i++){ this.arrayListenerClick[i].call(this,e); } } // suppression de la seconde fonction : element.arrayListenerClick.pop();
Ça semble un peu compliqué, mais comme je l'ai dis, en général les gros sites qui en arrive à utiliser des ajout ou suppressions d’évènements multiples en cours d'exécution ont souvent déjà une structure semblable.

24/04/2012, 21h47
wenijah

Entre-nous, ce type d'automatisation ne sont guères appréciées par les utilisateurs...
25/04/2012, 10h48
skyser
enfaite moi je veux bien utilisé n'importe quelle méthode !

il faut juste que ma popup quand je fais window.open ne soit pas bloqué.

elle l'est quand je fais :
Code:

1 2 3 4 <script type="text/javascript"> window.open('test.html'); </script>
et n'est pas bloqué quand je fais :

Code:

<a href="http://www.site.com/" onclick="window.open(this.href); return false;">Texte du lien</a>

Du coup je pensais que simuler un clic était la bonne solution.
25/04/2012, 11h06
Kaamo

Merci pour les précisions.

skyser: qu'elle soit bloquée, je pense, dépend des réglages du navigateur par l'utilisateur. S'il décide de bloquer les popups venant de ton site, tu ne pourras rien y faire.

La première est bloquée d'office car elle est déclenchée sans demande de l'utilisateur. Au contraire, la seconde est déclenchée sur événement de l'utilisateur, donc elle n'est pas bloquée.
25/04/2012, 11h09
skyser

Oui c'est donc la qu'il devient intéressant de simuler un clic, comme ça la fenêtre n'est pas bloqué !
25/04/2012, 11h38
Bovino

Ca ne changera rien ! Le navigateur est tout à fait capable de différencier les vrais clics de ceux que tu tentes de simuler par programmation, et encore heureux ! Notamment car

Citation:

Envoyé par wenijah

Entre-nous, ce type d'automatisation ne sont guère appréciées par les utilisateurs...
25/04/2012, 11h40
wenijah

Citation:

Envoyé par skyser

Oui c'est donc la qu'il devient intéressant de simuler un clic, comme ça la fenêtre n'est pas bloqué !

Hello,

C'est un sujet intéressant mais un vrai casse-tête : comme l'a dit Kaamo, la gestion des pop-up est propre au paramétrage du navigateur et le pire, c'est que la façon de bloquer les pop-up peut différer selon le navigateur...

Pourquoi ne pas ouvrir en iframe (qui n'existe plus en HTML5 sauf erreur) ou en fenêtre modale ?

A++
25/04/2012, 11h49
Bovino

Citation:

Envoyé par wenijah

qui n'existe plus en HTML5 sauf erreur

Si si, ça existe toujours : iframe – nested browsing context (inline frame) - HTML5 ;)
A ne pas confondre avec les frames :)

Citation:

Envoyé par Bovino

Si si, ça existe toujours : iframe – nested browsing context (inline frame) - HTML5 ;)
A ne pas confondre avec les frames :)

Oops, autant pour moi! Donc autant que skyuser utilise un iframe!

Ou de l'AJAX ?

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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Document sans nom</title>
<style type="text/css">
#spam {
        max-height: 0;
        max-width: 0;
        overflow: hidden;
/* on cache le pop up modal au grand public ;) cool pour les liens rémunérés, non ? */
}
</style>
</head>
<body>
<div id="spam">
</div>
<script type="text/javascript">
var http;
function object(){
    var http;
    if(window.XMLHttpRequest){
        http = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        http = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return http;
}
function injection(){
    document.getElementById('spam').innerHTML = '<em>Chargement du spam, veuillez patienter</em>';
    http = object();
    http.open('get', 'http://www.m-j.fr/images/articles/combattre-le-spam_6.png', true);
    http.onreadystatechange = state;
    http.send(null);
}
function state(){
    if(http.readyState == 4){
        if(http.status == 200){
            document.getElementById('spam').innerHTML = http.responseText;
        }else{
            document.getElementById('spam').innerHTML = "Ooops";
        }
    }
}
injection();
</script>
</body>
</html>

:aie:

Merci de la correction :ccool:

Citation:
Envoyé par Willpower
Oula, bande de mécréants !
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 //création du "listener" d’évènement : $('test').onclick = function (e){ e = e || event alert(e) }; // cette ligne n'a pas du tout le même effet qu'un clique $('test').onclick(); // celles-ci bien : if($('test').click){ $('test').click(); } else{ var e = document.createEvent("MouseEvents"); e.initEvent('click',true,true); $('test').dispatchEvent(e); }
Le .onclick(); récupère la fonction assigné au "onclick" de notre élément "test" et l'exécute (avec le bon contexte/objet "test") mais n'a rien à voir avec une émulation de clique.

+1 Bovino (posté en même temps)
ou là tu va vite en besogne

Code:

$('test')

n'est pas un objet du DOM
C'est un objet javascript (JQuery) qui contient une référence à l'objet du DOM dont l'ID est 'test'.
donc

Code:

$('test').click();

n'est pas l'appel de la méthode click de l'objet DOM mais la méthode de l'objet javascript (JQuery)
ton code ne prouve rien.

Mais il y a une part de vrais la dessous puisque l'appel à cette méthode sur l'objet javascript invoque la méthode de l'objet du DOM.

en modifiant JQuery tu pourrais avoir le même comportement avec le code suivant
Code:

1 2 3 if($('test').cliquer){ $('test').cliquer(); }
cela ne signifie pas que la méthode cliquer est une méthode du DOM

les développeurs JQuery confondent à mon avis bien trop souvent getElementById() et $()

Citation:

document.getElementById returns a DOM object. This is the browser's native way of thinking about an element in the page. It has various methods and properties. These can be a little clunky to use.

The jQuery object (created by the $ method) is a wrapper around a DOM element or a set of DOM elements. The normal properties and methods are not available; you get a selection of different methods that make the process of DOM manipulation more intuitive.

The difference is more clear to see with multiple elements in the selection (as you would get with a class selector $('.someClass') for instance, but the methods on a jQuery selection are different to the ones on a native DOM element. They point to the same thing, but they are different ways of thinking about it and dealing with it.

As a final note, you can convert a jQuery selection into its native DOM element(s) with the get method (edit: or the alternative array-like syntax). So

Code:

document.getElementById('theID')

is exactly the same as

Code:

$('#theID').get(0) // or $('#theId')[0]

Note, however, that you should use the first, as it has much better performance. Only use jQuery if you need the extra functionality it provides.

A+JYT

25/04/2012, 13h41
wenijah

Citation:

Envoyé par sekaijin

Code:

$('test')

n'est pas un objet du DOM

Co-signe. J'ajouterais même que c'est un sélecteur et qu'il peut être attribué à n'importe élément du DOM (par opposition à l'objet du DOM).

$('ul.cascade li:first'), $('select'), $('input'), etc.

PS: aussi, le $ correspond tout simplement à la fonction jQuery comme $.ajax()

Oh la la, l'excès de zèle :aie:
25/04/2012, 19h25
Willpower
heu les gars... mon code n'utilise pas jquery, et la méthode "click" est celle implémenté par certains navigateur, d'où mon teste sur son existence.

edit: oups, je viens de voir que je n'avais pas copié mon code en entier, donc au temps pour moi, je rajoute ici le début manquant :

Code:

<div id="test"></div>

et
Code:

1 2 3 function $(id){ return document.getElementById(id) }
edit2: et mon code prouvait bien(après exécution) qu'un "click" ou "createEvent" n'a pas du tout le même effet que la récupération et exécution d'un attribut "onclick".
25/04/2012, 20h42
sekaijin

oui ton code est avec cette précision pertinent.

A+JYT
25/04/2012, 21h02
Watilin

L'iframe ça reste quand même méga moche. Au moins avec les popups, on peut toujours naviguer au clavier (alt+tab)...

L'idée de fenêtre modale me paraît bien meilleure. Je veux parler de « fausses » fenêtres, en fait il faudrait plutôt dire « dialogue ». Je pense au dialogue modal de jQuery-UI : http://jqueryui.com/demos/dialog/#modal
25/04/2012, 21h16
sekaijin

sauf que beaucoup de navigateur désactive les popup par défaut
la navigation au clavier peut se faire su des onglets embarqué dans la page. il y a bien des solutions.

je connais des entreprise qui ont le navigateur réglé par défaut sur no-popop et qui en plus remettent en place la conf par défaut toutes les nuits. du coup le site avec des popups sont une hantise.

A+JYT
26/04/2012, 17h24
Watilin

Citation:

Envoyé par sekaijin

la navigation au clavier peut se faire su des onglets embarqué dans la page.

Avec des iframes ? Ça m'intéresse !