Diferencia entre _self, _top y _parent en el atributo de destino de la etiqueta de anclaje

80

Sé que se _blankabre una nueva pestaña cuando se usa con la etiqueta de anclaje y también, hay objetivos autodefinidos que uso cuando uso conjuntos de marcos, pero me gustaría saber la diferencia entre _parent, _selfy _top.

Joseph Rex
fuente

Respuestas:

117

Si bien estas respuestas son buenas, en mi humilde opinión, no creo que aborden completamente la pregunta.

El atributo de destino en una etiqueta de anclaje le dice al navegador el destino del destino del ancla. Inicialmente se crearon para manipular y dirigir anclajes al sistema de marcos del documento. Esto fue mucho antes de que CSS llegara en ayuda de los desarrolladores de HTML.

Si bien target="_self"es predeterminado por el navegador y el objetivo más común es target="_blank"que abre el ancla en una nueva ventana (que generalmente ha sido redirigida a pestañas por la configuración del navegador). Las etiquetas "_parent", "_top"y framenameson un misterio para aquellos que no están familiarizados con los días de la construcción de sitios iframe como tendencia.

target="_self"Esto abre un ancla en el mismo marco. Lo que es confuso es que debido a que generalmente ya no escribimos en marcos (y las etiquetas framey framesetson obsoletas en HTML5) la gente asume que esta es la misma función de ventana. En cambio, si este ancla estuviera anidada en marcos, se abriría en una especie de modo de caja de arena, es decir, solo en ese marco.

target="_parent" Abrirá el en el siguiente nivel de un marco si estuvieran anidados uno dentro del otro

target="_top" Esto se rompe fuera de todos los marcos en los que está anidado y abre el enlace como documento superior en la ventana del navegador.

target="framenameEsto fue originalmente obsoleto, pero se volvió a incorporar en HTML5. Esto apuntará al marco exacto en cuestión. Si bien nameera el método adecuado, ese método ha sido reemplazado por el uso de la idetiqueta de identificación.

<!--Example:-->

<html>
<head>
</head>
<body>
<iframe src="url1" name="A"><p> This my first iframe</p></iframe>
<iframe src="url2" name="B"><p> This my second iframe</p></iframe>
<iframe src="url3" name="C"><p> This my third iframe</p></iframe>

<a href="url4" target="B"></a>
</body>
</html>
Brian Ellis
fuente
16

La sección 6.16 Los nombres de destino del marco en la especificación HTML 4.01 define los significados, pero está parcialmente desactualizado. Se refiere a "ventanas", mientras que los borradores de HTML5 hablan de manera más realista sobre "contextos de navegación", ya que los navegadores modernos a menudo usan pestañas en lugar de ventanas en este contexto.

Brevemente, _selfes el valor predeterminado (contexto de navegación actual, es decir, ventana o pestaña actual), por lo que solo es útil anular una <base target=...>configuración. El valor se _parentrefiere al conjunto de marcos que es el padre del marco actual, mientras que _top"rompe todos los marcos" y abre el documento vinculado en toda la ventana del navegador.

Jukka K. Korpela
fuente
2
Aquí está el enlace al borrador de HTML5 para target: w3.org/TR/html-markup/a.html#a.attrs.target .
Oliver
16

target="_blank"

Abre una nueva ventana y muestra los datos relacionados.

target="_self"

Abre la ventana en el mismo marco, significa la propia ventana existente.

target="_top"

Abre el documento vinculado en todo el cuerpo de la ventana.

target="_parent"

Abre datos en el tamaño de la ventana principal.

Srinivas
fuente
¿Qué significa "cuerpo completo"?
robsch
@robsch vea la respuesta de James Johnson
Joseph Rex
entonces, ¿de qué target="_main"habla el atributo?
Anupam Haldkar
3

Aquí hay una imagen con diferentes valores objetivo.

Diferentes valores objetivo.1

Binaya
fuente
Por favor explique su "respuesta". Esta imagen no es clara por sí sola.
SherylHohman
Hola @SherylHohman, agradezco tus comentarios. ¿Es que el color de la imagen no es claro o no tiene explicación?
Binaya
1
Corrígeme si estoy equivocado. Este es mi entendimiento cuando miro la imagen: 1. _parent: un enlace en el Cuadro 1 se abre en el Cuadro 2 cuando se hace clic en él. 2. _self: un vínculo en el fotograma 1 se abre en el fotograma 1 cuando se hace clic en él. 3. _blank: cualquier enlace se abrirá en una nueva pestaña cuando se haga clic en él, independientemente del marco en el que se encuentre, incluso cuando esté en un iframes anidado. 4. _top: se abrirá un enlace en la pestaña actual cuando se haga clic en él, independientemente del marco en el que se encuentre, incluso cuando esté en un iframes anidado.
Motss
1

A continuación se muestra un ejemplo práctico de etiqueta de anclaje con diferentes

Atributo objetivo

Syed Maqsood
fuente
3
Copie las partes relevantes de su artículo vinculado a SO para la posteridad.
Tom
Las respuestas de solo enlace no se consideran respuestas en SO. Como es, este es un gran ejemplo de un comentario útil. Para ser considerado una respuesta, debe insertar información relevante de la página vinculada directamente en su publicación. Consulte las páginas de ayuda de SO para obtener más información.
SherylHohman
¡El enlace ya no está disponible!
Revnic Robert-Nick
1
@ RevnicRobert-Nick han restaurado el enlace
Syed Maqsood