Buscar..
Parámetros
| Atributo | Detalles |
|---|---|
name | Establece el nombre del elemento, que se utilizará con a etiqueta para cambiar el src de iframe. |
width | Establece el ancho del elemento en píxeles. |
height | Establece la altura del elemento en píxeles. |
src | Especifica la página que se mostrará en el marco. |
srcdoc | Especifica el contenido que se mostrará en el marco, suponiendo que el navegador lo admita. El contenido debe ser HTML válido. |
sandbox | Cuando se configura, el contenido del iframe se trata desde un origen único y se desactivarán las funciones que incluyen scripts, complementos, formularios y ventanas emergentes. Las restricciones se pueden relajar selectivamente agregando una lista de valores separados por espacios. Vea la tabla en Observaciones para los posibles valores. |
allowfullscreen | Ya sea para permitir que los contenidos del iframe utilicen requestFullscreen() |
Observaciones
Un iframe se utiliza para incrustar otro documento en el documento HTML actual.
Puedes usar iframes para mostrar:
- otras páginas HTML en el mismo dominio;
- otras páginas HTML en otro dominio (ver más abajo - Política del mismo origen);
- Documentos PDF (aunque IE podría tener algunos problemas, esta pregunta SO podría ayudar);
DEBE usar un iframe como último recurso, ya que tiene problemas con los marcadores y la navegación, y siempre hay mejores opciones aparte de un iframe. Esta pregunta de SO debería ayudarlo a comprender más sobre los altibajos de los iframes.
Política del mismo origen
Algunos sitios no pueden mostrarse usando un iframe, porque aplican una política llamada política de origen idéntico . Esto significa que el sitio en el que se encuentra el iframe debe estar en el mismo dominio que el que se muestra.
Esta política también se aplica a la manipulación de contenido que vive dentro de un iFrame. Si el iFrame accede al contenido de un dominio diferente, no podrá acceder o manipular el contenido dentro de un iFrame.
El elemento iframe en W3C
atributo de sandbox
El atributo sandbox , cuando se establece, agrega restricciones adicionales al iframe. Se puede usar una lista de fichas separadas por espacios para relajar estas restricciones.
| Valor | Detalles |
|---|---|
allow-forms | Permite la presentación de formularios. |
allow-pointer-lock | Habilita la API de puntero de JavaScript. |
allow-popups | Las ventanas emergentes se pueden crear usando window.open o <a target="_blank" |
allow-same-origin | El documento iframe utiliza su origen real en lugar de recibir uno único. Si se usa con allow-scripts el documento iframe puede eliminar todo el espacio aislado si es del mismo origen que el documento principal. |
allow-scripts | Habilita scripts. El documento iframe y el documento principal pueden comunicarse entre sí mediante la API postMessage() . Si se utiliza con allow-same-origin el documento iframe puede eliminar todo el espacio aislado si es del mismo origen que el documento principal. |
allow-top-navigation | Permite que el contenido del iframe cambie la ubicación del documento de nivel superior. |
Fundamentos de un marco en línea
El término "IFrame" significa marco en línea. Se puede usar para incluir otra página en tu página. Esto producirá un pequeño marco que muestra el contenido exacto del base.html .
<iframe src="base.html"></iframe>
Configuración del tamaño del marco
El IFrame puede redimensionarse utilizando los atributos de width y height , donde los valores están representados en píxeles (HTML 4.01 permite valores de porcentaje, pero HTML 5 solo permite valores en píxeles de CSS).
<iframe src="base.html" width="800" height="600"></iframe>
Usando Anclas Con IFrames
Normalmente, un cambio de página web dentro de un Iframe se inicia con el Iframe, por ejemplo, al hacer clic en un enlace dentro de Ifame. Sin embargo, es posible cambiar el contenido de un IFrame desde fuera del IFrame. Puede usar una etiqueta de anclaje cuyo atributo href se establezca en la URL deseada y cuyo atributo de target se establezca en el atributo de name de iframe.
<iframe src="webpage.html" name="myIframe"></iframe>
<a href="different_webpage.html" target="myIframe">Change the Iframe content to different_webpage.html</a>
Usando el atributo "srcdoc"
El atributo srcdoc se puede usar (en lugar del atributo src ) para especificar el contenido exacto del iframe como un documento HTML completo. Esto producirá un IFrame con el texto "¡Los IFrames son geniales!"
<iframe srcdoc="<p>IFrames are cool!</p>"></iframe>
Si el srcdoc atributo no está soportado por el navegador, el iframe en lugar de recurrir al uso de la src atributo, pero si tanto el src y srcdoc atributos están presentes y apoyado por el navegador, srcdoc tiene prioridad.
<iframe srcdoc="<p>Iframes are cool!</p>" src="base.html"></iframe>
En el ejemplo anterior, si el navegador no admite el atributo srcdoc , mostrará los contenidos de la página base.html .
Caja de arena
Lo siguiente incrusta una página web no confiable con todas las restricciones habilitadas
<iframe sandbox src="http://example.com/"></iframe>
Para permitir que la página ejecute scripts y envíe formularios, agregue allow-scripts y allow-forms al sandbox attribute .
<iframe sandbox="allow-scripts allow-forms" src="http://example.com/"></iframe>
Si hay contenido no confiable (como comentarios del usuario) en el mismo dominio que la página web principal, se puede usar un iframe para deshabilitar los scripts y al mismo tiempo permitir que el documento principal interactúe con su contenido mediante JavaScript.
<iframe sandbox="allow-same-origin allow-top-navigation" src="http://example.com/untrusted/comments/page2">
El documento principal puede agregar detectores de eventos y cambiar el tamaño de IFrame para que se ajuste a su contenido. Esto, junto con el allow-top-navigation , puede hacer que el iframe de espacio aislado aparezca como parte del documento principal.
Esta caja de arena no es un reemplazo para la entrada de desinfección, pero se puede usar como parte de una estrategia de defensa en profundidad .
También tenga en cuenta que un atacante puede subvertir esta zona de pruebas convenciendo a un usuario de que visite directamente la fuente del iframe. El encabezado HTTP de la Política de seguridad del contenido se puede usar para mitigar este ataque.