¿Cómo abrir un enlace en una nueva pestaña en HTML?
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?
Establezca el target
atributo 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í blank
en lugar de _blank
porque, 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'
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
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
Usar target="_blank"
:
<a href="http://www.example.com/" target="_blank" rel="noopener noreferrer">This will open in a new window!</a>
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";