¿Cómo abrir un enlace en una nueva pestaña en HTML?

Resuelto ZenthyxProgramming asked hace 11 años • 12 respuestas

Estoy trabajando en un proyecto HTML y no encuentro 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?

ZenthyxProgramming avatar Jul 18 '13 05:07 ZenthyxProgramming
Aceptado

Establezca el targetatributo del enlace en _blank:

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

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


Nota

Anteriormente sugerí blanken lugar de _blankporque, si se usa, abrirá una nueva pestaña y luego usará la misma pestaña si se hace clic nuevamente en el enlace. Sin embargo, esto se debe únicamente a que, como señaló GolezTrol, se refiere al nombre de un marco/ventana, que se configuraría y usaría cuando se presione nuevamente el enlace para abrirlo en la misma pestaña.


¡Consideración de seguridad!

La rel="noopener noreferrer"finalidad es evitar que la pestaña recién abierta pueda modificar la pestaña original de forma maliciosa. Para obtener más información sobre esta vulnerabilidad, lea los siguientes artículos:

  • La vulnerabilidad target="_blank" por ejemplo
  • Enlaces externos que utilizan target='_blank'
SharkofMirkwood avatar Jul 17 '2013 22:07 SharkofMirkwood

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 el valor predeterminado):

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

Abra el documento vinculado en el marco principal:

 <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

Learner Always avatar Jul 12 '2014 18:07 Learner Always

Si desea realizar 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 avatar Nov 05 '2015 13:11 Cyberquill

Usar target="_blank":

<a href="http://www.example.com/" target="_blank" rel="noopener noreferrer">This will open in a new window!</a>
Evan Hahn avatar Jul 17 '2013 22:07 Evan Hahn

Cuándo usar target='_blank':

La versión HTML (algunos dispositivos no la 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 avatar Nov 05 '2015 13:11 Kaleem Ullah