¿Cómo hago clic programáticamente en un enlace con javascript?

173

¿Hay alguna manera de hacer clic en un enlace en mi página usando JavaScript?

javascript hyperlink click anchor Mahdi Alkhatib
fuente
66
Solo puede preformar un 'clic' en los elementos input type = "button".
Ballsacian1
@ Ballsacian1 Utilicé .click()un <a>elemento y funcionó.
PaulMag

Respuestas:

237 
document.getElementById('yourLinkID').click();
arik
fuente
18
En realidad, hasta ahora funcionó en todos los navegadores que probé, incluidos IE, Safari, Chrome, Firefox y Opera.
arik
55
Tenga en cuenta que si el enlace tiene una target="_blank"propiedad, el bloqueador de ventanas emergentes del navegador se activará para la nueva ventana.
wonsuc
45

Esta función funciona al menos en Firefox e Internet Explorer. Ejecuta cualquier controlador de eventos adjunto al enlace y carga la página vinculada si los controladores de eventos no cancelan la acción predeterminada.

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
fuente
55
Matthew tiene razón, y stackoverflow.com/questions/809057/… tiene más información sobre por qué. Cross browser es divertido :)
Dan F
44
no respeta el targetatributo o<base target="frame">
Vitim.us
38

Si solo desea cambiar la dirección de la página actual, puede hacerlo simplemente haciendo esto en Javascript:

location.href = "http://www.example.com/test";
Fabien Ménager
fuente
53
Votado porque no me gustan las respuestas que responden al caso de uso en lugar de abordarlo. "Supongo que esta es su intención, y no estoy al tanto de sus limitaciones, así que con una esfera conceptual en un vacío conceptual: use esto".
cazlab
11
He votado porque estaba buscando una buena solución para hacer clic mailto:en el enlace en el script de userjs. Definitivamente me ahorró tiempo. Estaba preparado para crear un aelemento y hacer un "clic programático" stackoverflow.com/questions/809057/…
AD
66
También intenté llamar al click()método propuesto en otro lugar y más arriba y no funcionó en IE9, pero la configuración location.hrefrealmente envió el correo electrónico desde el mailto:enlace. Gran solución!
ajeh
Este método fue útil en PyQT4. La llamada click () no funcionaba para mí. ¡Gracias!
VilleLipponen
No aborda mi caso de uso que está en la pregunta, donde quiero hacer clic en un enlace. El enlace no lleva a ninguna parte, pero tiene otras cosas vinculadas al evento de clic. No quiero cambiar de ubicación.
Elefante al azar
17

Simplemente así: 

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

o al cargar la página: 

<body onload="document.getElementById('myLink').click()">
...
<a id="myLink" onclick="alert('link click');">LINK 1</a>
...
</body>
Canavar
fuente
2
Sí, pero luego tiene que suceder algún otro clic.
Ólafur Waage
2
¿No puedes hacerlo en cualquier evento, como cargar página?
Bill the Lizard
2
gracias por la ayuda, pero estoy usando Firefox 3 y no funciona, en la consola de error dice Error: document.getElementById ("myLink"). clic no es una función
Parece que Firefox no admite el método de clic. y la mayoría de las respuestas, incluida la mía, no son útiles :)
Canavar
@Canavar: Intenta hacer clic en lugar de hacer clic
Stefan Steiger
9

La forma de jQuery de hacer clic en un enlace es

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

Para el enlace mailTo, debe escribir el siguiente código

$('#LinkID')[0].click();
Muhammad Waqas Iqbal
fuente
2
Esto no funciona. Esta no es la respuesta a la pregunta que hizo. Hubiera dado un resultado negativo si hubiera tenido más puntos.
2
Esto no funciona? ¿Lo has probado? Espero que entiendas lo que significa "LinkID". Me sorprendería mucho si alguien hoy en día es lo suficientemente atrasada para js sin jQuery. De todos modos, siéntase libre de votar después de ganar algunos puntos
Muhammad Waqas Iqbal
3
Intenté esto y el enlace mailTo no funciona en React Native. Use esto: window.location.href = "mailto: [email protected]";
fungusanthrax
44
Esto tampoco funcionó para mí al hacer clic en un aenlace. Usar la [0].click()versión funciona, lo cual creo que es lo mismo que la document.getElementById('yourLinkID').click();respuesta.
Mmm
Navegador Firefox: esto funciona para <input> pero no para un <a>
jimver04
2

Para mí, logré hacerlo funcionar de esa manera. Implementé el clic automático en 5000 milisegundos y luego cerré el ciclo después de 1000 milisegundos. Entonces solo hubo 1 clic automático.

<script> var myVar = setInterval(function ({document.getElementById("test").click();}, 500); setInterval(function () {clearInterval(myVar)}, 1000); </script>
Naiguel Developer
fuente
2

Muchos de los métodos anteriores han quedado en desuso. Ahora se recomienda usar el constructor que se encuentra aquí

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

Esto hará que se haga clic en la etiqueta de anclaje, pero no se mostrará si los bloqueadores de elementos emergentes están activos, por lo que el usuario deberá permitir los elementos emergentes.

maus
fuente
3
No entiendo por qué el evento se establece dos veces. No veo cómo event = new CustomEvent ('clic'); es el evento de referencia, así que lo que es el punto de var ...
historystamp
Creo que tienes el sello histórico correcto. Está creando un evento de mouse e inmediatamente lo sobrescribe con un nuevo evento.
John Lord
1

En lugar de hacer clic, ¿puede reenviar a la URL a la que iría el clic usando Javascript?

Tal vez podrías poner algo en el cuerpo en Carga para ir a donde quieras.

Jas Panesar
fuente
Publiqué ambas preguntas porque las personas no buscarán naturalmente la información del botón cuando se trata de un enlace de "etiqueta". No están técnicamente relacionados.
Scott Tovey
1

Podrías redirigirlos a otra página. En realidad, hacer que literalmente haga clic en un enlace y viajar a él parece irreflexivo, pero no sé toda la historia.

akway
fuente
2
En mi caso, no sé si el enlace tiene el objetivo "_blank", así que no sé si debería usar location.href o window.open. Es más corto enviar un clic. Hay casos de uso, por ejemplo, es posible que desee activar un evento como abrir un modalbox.
dxvargas
-2

No puede hacer que el mouse del usuario haga nada. Pero tienes control total sobre lo que sucede cuando se dispara un evento.

Lo que puedes hacer es hacer clic en la carga corporal. W3Schools tiene un ejemplo aquí.

Ólafur Waage
fuente
66
@Neolit ​​era un mal enlace antes de que se obtuviera 404 de todos modos. Sin pérdida.
John Dvorak
-2

Función JS del lado del cliente para hacer clic automáticamente en un enlace cuando ...

Aquí hay un ejemplo en el que verifica el valor de una entrada de formulario oculta, que contiene un error transmitido desde el servidor ... su cliente JS luego verifica el valor y llena un error en otra ubicación que especifique ... en este caso de un modal de inicio de sesión emergente.

var signUperror = document.getElementById('handleError')

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