Comment puis-je cliquer par programme sur un lien avec javascript?

173

Existe-t-il un moyen de cliquer sur un lien sur ma page en utilisant JavaScript?

Mahdi Alkhatib
la source
6
Vous ne pouvez préformer un 'clic' que sur les éléments input type = "button".
Ballsacian1
@ Ballsacian1 J'ai utilisé .click()sur un <a>élément et cela a fonctionné.
PaulMag

Réponses:

237
document.getElementById('yourLinkID').click();
Arik
la source
18
En fait, jusqu'à présent, cela fonctionnait dans tous les navigateurs que j'ai essayés, y compris IE, Safari, Chrome, Firefox et Opera.
arik
5
Notez que si le lien a une target="_blank"propriété, le bloqueur de popup du navigateur sera activé pour la nouvelle fenêtre.
wonsuc
45

Cette fonction fonctionne au moins dans Firefox et Internet Explorer. Il exécute tous les gestionnaires d'événements attachés au lien et charge la page liée si les gestionnaires d'événements n'annulent pas l'action par défaut.

function clickLink(link) {
    var cancelled = false;

    if (document.createEvent) {
        var event = document.createEvent("MouseEvents");
        event.initMouseEvent("click", true, true, window,
            0, 0, 0, 0, 0,
            false, false, false, false,
            0, null);
        cancelled = !link.dispatchEvent(event);
    }
    else if (link.fireEvent) {
        cancelled = !link.fireEvent("onclick");
    }

    if (!cancelled) {
        window.location = link.href;
    }
}
Matthew Crumley
la source
5
Matthew a raison, et stackoverflow.com/questions/809057/… a plus d'informations sur pourquoi. Le navigateur croisé est amusant :)
Dan F
4
il ne respecte pas l' targetattribut ou<base target="frame">
Vitim.us
38

Si vous souhaitez uniquement modifier l'adresse actuelle de la page, vous pouvez le faire simplement en Javascript:

location.href = "http://www.example.com/test";
Fabien Ménager
la source
53
Voté parce que je n'aime pas les réponses qui répondent au cas d'utilisation plutôt que d'y répondre. «Je suppose que c'est votre intention, et je ne suis pas conscient de vos contraintes, donc avec une sphère conceptuelle dans un vide conceptuel: utilisez ceci.
cazlab
11
J'ai voté, car je cherchais une solution intéressante pour cliquer sur le mailto:lien dans le script userjs. M'a définitivement fait gagner du temps. J'étais prêt à créer un aélément et à faire un "clic programmatique" stackoverflow.com/questions/809057/…
AD
6
J'ai aussi essayé la click()méthode d' appel proposée ailleurs et ci-dessus et cela ne fonctionnait pas dans IE9, mais le réglage a en location.hreffait envoyé l'e-mail à partir du mailto:lien. Excellente solution!
ajeh
Cette méthode a été utile dans PyQT4. click () appel ne fonctionnait pas pour moi. Merci!
VilleLipponen
Ne répond pas à mon cas d'utilisation qui est dans la question, où je veux cliquer sur un lien. Le lien ne mène nulle part, mais a d'autres éléments liés à l'événement de clic. Je ne veux pas changer d'emplacement.
Random Elephant
17

Simplement comme ça:

<a id="myLink" onclick="alert('link click');">LINK 1</a>
<a id="myLink2" onclick="document.getElementById('myLink').click()">Click link 1</a>

ou au chargement de la page:

<body onload="document.getElementById('myLink').click()">
...
<a id="myLink" onclick="alert('link click');">LINK 1</a>
...
</body>
Canavar
la source
2
Oui, mais un autre clic doit se produire.
Ólafur Waage
2
Ne pouvez-vous pas le faire sur n'importe quel événement, comme le chargement de page?
Bill the Lizard
2
merci pour l'aide, mais j'utilise firefox 3 et cela ne fonctionne pas, dans la console d'erreur indique Erreur: document.getElementById ("myLink"). click is not a function
Il semble que Firefox ne prend pas en charge la méthode de clic. et la plupart des réponses, y compris la mienne, ne sont pas utiles :)
Canavar
@Canavar: Essayez Click au lieu de cliquer
Stefan Steiger
9

La façon jQuery de cliquer sur un lien est

$('#LinkID').click();

Pour le lien mailTo, vous devez écrire le code suivant

$('#LinkID')[0].click();
Muhammad Waqas Iqbal
la source
2
Cela ne fonctionne pas. Ce n'est pas la réponse à la question qu'il a posée. J'aurais donné un négatif pour cela si j'avais eu quelques points supplémentaires.
2
Cela ne marche pas? Avez-vous essayé? J'espère que vous comprenez ce que signifie "LinkID". Je serais vraiment surpris si quelqu'un de nos jours est assez en arrière pour js sans jQuery. Quoi qu'il en soit, n'hésitez pas à voter contre après avoir gagné quelques points
Muhammad Waqas Iqbal
3
J'ai essayé cela et le lien mailTo ne fonctionne pas dans React Native. Utilisez ceci: window.location.href = "mailto: [email protected]";
fungusanthrax
4
Cela n'a pas fonctionné pour moi non plus pour cliquer sur un alien. L'utilisation de la [0].click()version fonctionne, ce qui, je crois, est la même que la document.getElementById('yourLinkID').click();réponse.
Mmm
Navigateur Firefox: Cela fonctionne pour <input> mais pas pour un <a>
jimver04
2

Pour moi, j'ai réussi à le faire fonctionner de cette façon. J'ai déployé le clic automatique en 5000 millisecondes, puis j'ai fermé la boucle après 1000 millisecondes. Ensuite, il n'y a eu qu'un seul clic automatique.

<script> var myVar = setInterval(function ({document.getElementById("test").click();}, 500); setInterval(function () {clearInterval(myVar)}, 1000); </script>
Développeur Naiguel
la source
2

La plupart des méthodes ci-dessus sont obsolètes. Il est maintenant recommandé d'utiliser le constructeur trouvé ici

function clickAnchorTag() {
    var event = document.createEvent('MouseEvent');
    event = new CustomEvent('click');
    var a = document.getElementById('nameOfID');
    a.dispatchEvent(event);
}

Cela entraînera un clic sur la balise d'ancrage, mais cela ne montrera pas si les bloqueurs de fenêtres contextuelles sont actifs, l'utilisateur devra donc autoriser les fenêtres contextuelles.

maus
la source
3
Je ne comprends pas pourquoi l'événement se déroule deux fois. Je ne vois pas comment event = new CustomEvent ('click'); est un événement de référence, alors quel est le point de var ...
historystamp
je pense que vous avez raison historystamp. Il crée un événement de souris, puis l'écrase immédiatement par un nouvel événement.
John Lord
1

Au lieu de cliquer, pouvez-vous rediriger vers l'URL vers laquelle le clic irait en utilisant Javascript?

Peut-être pourriez-vous mettre quelque chose dans le corps surLoad pour aller où vous le souhaitez.

Jas Panesar
la source
J'ai posté sur les deux questions parce que les gens ne chercheront pas naturellement les informations sur les boutons lorsqu'ils traitent d'un lien "une balise". Ils ne sont techniquement pas liés.
Scott Tovey le
1

Vous pouvez simplement les rediriger vers une autre page. En fait, le fait de cliquer littéralement sur un lien et de s'y rendre ne semble pas effrayant, mais je ne connais pas toute l'histoire.

Akway
la source
2
Dans mon cas, je ne sais pas si le lien a la cible "_blank", donc je ne sais pas si je dois utiliser location.href ou window.open. Il est plus court d'envoyer un clic. Il existe des cas d'utilisation, par exemple, vous pouvez déclencher un événement comme l'ouverture d'une modalbox.
dxvargas
-2

Vous ne pouvez rien faire faire à la souris de l'utilisateur. Mais vous avez un contrôle total sur ce qui se passe lorsqu'un événement se déclenche.

Ce que vous pouvez faire est de cliquer sur la charge corporelle. W3Schools a un exemple ici.

Ólafur Waage
la source
6
@Neolit ​​c'était un mauvais lien avant qu'il ne soit de toute façon 404. Aucune perte.
John Dvorak
-2

Fonction JS côté client pour cliquer automatiquement sur un lien lorsque ...

Voici un exemple où vous vérifiez la valeur d'une entrée de formulaire masquée, qui contient une erreur transmise par le serveur .. votre client JS en vérifie ensuite la valeur et remplit une erreur dans un autre emplacement que vous spécifiez. cas un modal de connexion pop-up.

var signUperror = document.getElementById('handleError')

if (signUperror) {
  if(signUperror.innerHTML != ""){
  var clicker = function(){
    document.getElementById('signup').click()
  }
  clicker()
  }
}
Vontei
la source