¿Cómo abrir el enlace en una nueva pestaña en html?

391

Estoy trabajando en un proyecto HTML, y no puedo descubrir cómo abrir un enlace en una nueva pestaña sin javascript.

Ya sé que <a href="http://www.WEBSITE_NAME.com"></a>abre el enlace en la misma pestaña. ¿Alguna idea de cómo abrirlo en uno nuevo?

html hyperlink anchor browser-tab Programación Zenthyx
fuente
40
uso<a href="url" target="_blank">...</a>
Rohit Agrawal
1
Como dice Rohit, agregue el parámetro param target = "_ blank", sin embargo, en Firefox al menos si hace dos guiones bajos target = "__ blank" se abrirá en una nueva pestaña, pero al hacer clic en otros enlaces usando el mismo guión bajo doble, se abre el nuevo páginas en la nueva pestaña anterior, lo que significa que solo tiene una pestaña adicional abierta.
Justin Levene

Respuestas:

600

Establezca el atributo 'target' del enlace en _blank:

<a href="#" target="_blank" rel="noopener noreferrer">Link</a>

Editar: para otros ejemplos, ver aquí: http://www.w3schools.com/tags/att_a_target.asp

(Nota: sugerí anteriormente en blanklugar de _blankporque, si se usa, se abrirá una nueva pestaña y luego usará la misma pestaña si se vuelve a hacer clic en el enlace. Sin embargo, esto es solo porque, como señaló GolezTrol, se refiere al nombre a de un marco / ventana, que se establecería y usaría cuando se presione nuevamente el enlace para abrirlo en la misma pestaña).

Consideración de seguridad!

El rel="noopener noreferrer"objetivo es evitar que la pestaña recién abierta pueda modificar la pestaña original maliciosamente. Para obtener más información sobre esta vulnerabilidad, consulte estos recursos:

SharkofMirkwood
fuente
16
Todos los objetivos especiales comienzan con un guión bajo. blanksería el nombre de un marco o ventana. Puede parecer que funciona, porque una nueva ventana o pestaña probablemente se abrirá cuando no exista ninguna con el nombre 'en blanco', pero un segundo clic en el enlace debería abrir la página en esa misma pestaña nuevamente en lugar de abrir otra más.
GolezTrol
2
Bueno, supongo que no es inválido, es simplemente diferente. Creo que en lugar de blankusted podría usarlo foo, aunque en _blankrealidad tiene un significado especial. No puedo encontrar ninguna información para demostrar lo contrario. ¿Puedes?
GolezTrol
2
@ Stefan No, _blankestará bien; los enlaces se abrirán en una pestaña diferente. Si especifica un nombre sin guión bajo, (por ejemplo blank) los enlaces se abrirán en la misma pestaña.
SharkofMirkwood
66
Un consejo: tenga en cuenta la vulnerabilidad debida a _blank. Más información medium.com/@jitbit/…
Aistis
1
Otra página con la vulnerabilidad mathiasbynens.github.io/rel-noopener, que es un ejemplo en sí mismo.
PhoneixS
99

Utilice uno de estos según sus requisitos.

Abra el documento vinculado en una nueva ventana o pestaña:

 <a href="xyz.html" target="_blank"> Link </a>

Abra el documento vinculado en el mismo marco en el que se hizo clic (esto es predeterminado):

 <a href="xyz.html" target="_self"> Link </a>

Abra el documento vinculado en el marco primario:

 <a href="xyz.html" target="_parent"> Link </a>

Abra el documento vinculado en el cuerpo completo de la ventana:

 <a href="xyz.html" target="_top"> Link </a>

Abra el documento vinculado en un marco con nombre:

 <a href="xyz.html" target="framename"> Link </a>

Ver MDN

Aprendiz siempre
fuente
Gracias por la información. ¿Cómo abrir el enlace en una nueva pestaña al hacer clic?
Shajeel Afzal
Use el código en html, como se compartió anteriormente. La mayoría de los nuevos navegadores abren los enlaces en una nueva pestaña de forma predeterminada cuando utiliza target = "_ blank"
Estudiante siempre
1
Tenga en cuenta que target="_blank"tiene una vulnerabilidad, puede leer sobre ella en mathiasbynens.github.io/rel-noopener
PhoneixS
36

Si desea ejecutar el comando una vez para todo su sitio, en lugar de tener que hacerlo después de cada enlace. Pruebe este lugar dentro del encabezado de su sitio web y bingo.

<head>
<title>your text</title>
<base target="_blank" rel="noopener noreferrer">
</head>

espero que esto ayude

Cyberquill
fuente
3
no te olvides de agregar rel = "noopener noreferrer"
Filósofo desatinado el
13

Uso target="_blank":

<a href="http://www.example.com/" target="_blank" rel="noopener noreferrer">This will open in a new window!</a>
Evan Hahn
fuente
3
no te olvides de agregar rel = "noopener noreferrer"
Filósofo desatinado el
6

Cuando usar target='_blank':

La versión HTML (algunos dispositivos no lo admiten):

<a href="http://chriscoyier.net" target="_blank">This link will open in new window/tab</a>

La versión de JavaScript para todos los dispositivos:

El uso de rel = "external" es perfectamente válido

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $('a[rel="external"]').attr('target', '_blank');
</script>

y para Jquery puedes probar con el siguiente:

$("#content a[href^='http://']").attr("target","_blank");

Si la configuración del navegador no le permite abrir en ventanas nuevas:

href = "google.com";
onclick="window.open (this.href, ''); return false";
Kaleem Ullah
fuente
1
no te olvides de agregar rel = "noopener noreferrer"
Filósofo desatinado el
2

Puedes usar:

<a href="http://www.WEBSITE_NAME.com"  target="_blank"> Website</a>

Sin embargo, lo anterior hace que su sitio sea vulnerable a los ataques de phishing. Puede evitar que ocurra en algunos navegadores agregando rel = "noopener noreferrer" a su enlace. Con esto agregado, el ejemplo anterior se convierte en:

<a href="http://www.WEBSITE_NAME.com" rel="noopener noreferrer" target="_blank">Website.com</a>

echa un vistazo para obtener más información: https://www.thesitewizard.com/html-tutorial/open-links-in-new-window-or-tab.shtml

Thabang
fuente
0

Podrías hacerlo así:

<a href="https://duckduckgo.com/" target="_blank" rel="noopener noreferrer">Open Duck</a>

Consulte también la siguiente url en MDN para obtener más información sobre seguridad y privacidad:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Security_and_privacy

que a su vez tiene un enlace a un buen artículo llamado Target = "_ blank" - la vulnerabilidad más subestimada :

https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

darmis
fuente