Los marcos en línea, comúnmente conocidos como "iframes", son el único tipo de marco permitido en HTML5. Estos marcos son esencialmente una sección de tu página que "recortas". En el espacio que ha recortado de la página, puede alimentar una página web externa. En esencia, un iframe es otra ventana del navegador que se encuentra dentro de su página web. Usted puede codificar los marcos comunes que se usan en sitios web que necesitan incluir contenido externo como un mapa de Google o un video de YouTube. Ambos de estos sitios web populares utilizan iframes en su código de inserción.
Cómo usar el elemento IFRAME
El elemento utiliza los elementos globales de HTML5, así como varios otros elementos. Cuatro también son atributos en HTML 4.01:
- -La URL para la fuente del marco
- -La altura de la ventana
- -El ancho de la ventana
- -El nombre de la ventana
Y tres son nuevas en HTML5:
srcdoc-El HTML para la fuente del marco. Este atributo tiene prioridad sobre cualquier URL en elsrcatributosalvadera-Una lista de características que deberían estar permitidas o no en la ventana del marcosin costura: Indica al agente de usuario que el iframe debe representarse como si fuera parte invisible del documento principal
Para crear un iframe simple, establezca la URL de origen y el ancho y alto:
Tenga en cuenta que puede optar por no utilizar valores de píxeles para la configuración de su iframe, pero en su lugar puede optar por utilizar un porcentaje. Si está creando un sitio web sensible cuyo tamaño debería cambiar con diferentes tamaños de pantalla, estos porcentajes serán importantes.
También hay algunos atributos que son válidos en HTML 4.01 pero obsoletos en HTML5. Como la mayoría de los sitios web de hoy utilizan HTML5 +, estos atributos son los que no querrá usar (pero que puede ver en algunos documentos heredados).
- -En vez, usa un
UNAelemento para enlazar a una descripción - -En vez, usa el CSS
flotadorpropiedad permitir la transparencia-En vez, usa el CSSfondoPropiedad para hacer el ifram transparente.- -En vez de usar el
fronteraPropiedad CSS margen de altura-En vez, usa el CSSmargenpropiedadancho de margen-En vez, usa el CSSmargenpropiedad- -En vez, usa el CSS
rebosarpropiedad
Soporte de navegador IFRAME
los IFRAME Elemento es compatible con todos los navegadores modernos:
- Androide
- Cromo
- Firefox
- Internet Explorer 2+
- iOS / Safari Mobile
- Netscape 7+
- Opera 3+
- Safari
Si no se muestra ningún número de versión en la lista anterior, es porque todas las versiones de ese navegador lo admiten.
Una cosa a tener en cuenta es que, si bien todos los navegadores son compatibles con IFRAME Elemento, todavía hay soporte limitado para algunas de las características de HTML5.
- Utilizando
rebosarpara desactivar el desplazamiento no es confiable. Si no desea barras de desplazamiento en sus iframes, debe continuar usando eldesplazamientoatributo. - los
srcdoc,salvaderaysin costuralos atributos no son compatibles con ningún navegador en este momento.
Vinculación con iframes
Cuando le das a tus iframes un nombre o carné de identidad luego puede apuntar sus enlaces a ese marco con el atributo en el UNA elemento. Luego, cuando un usuario haga clic en el enlace, se abrirá dentro del iframe al que se hace referencia en lugar de en la ventana actual.
Inténtalo tú mismo. Escriba lo siguiente en una página web:
Este es mi iframe
Al hacer clic en este enlace, se abrirá un nuevo documento dentro de la ventana anterior.
id = "myIframe" src = "http://webdesign.about.com/#lp-main" height = "200px" width = "500px">
Si el documento abierto en el IFRAME no tiene ningún objetivo establecido, entonces todos esos enlaces se abrirán en el mismo iframe que el documento principal.
Puedes usar esta característica para hacer enlaces en uno IFRAME cambiar los contenidos de otro IFRAME en la misma pagina.
Marcos y seguridad
los IFRAME El elemento, por sí mismo, no es un riesgo de seguridad para usted o sus lectores. Desafortunadamente, los iframes han ganado una mala reputación porque pueden ser utilizados por sitios web maliciosos para incluir contenido que puede infectar la computadora de un visitante sin que lo vean en la página. Esto se hace teniendo enlaces que apuntan a lo invisible. IFRAME y esos scripts activan código malicioso. El usuario hace clic en el enlace y piensa que el enlace está roto porque no parecía que ocurriera nada, pero se puso en marcha un script donde no podían verlo.
También hay virus informáticos que inyectarán un invisible. IFRAME en sus páginas web, convirtiendo efectivamente su sitio web en una botnet. Pueden hacerlo a través de inyección SQL y otros ataques.
Lo que hay que recordar cuando se incluye una IFRAME En su página web, sus usuarios solo son tan seguros como el contenido de todos los sitios a los que se vincula. Si tiene razones para sentir que un sitio no es confiable, no lo vincule de ninguna manera y definitivamente no incluya su contenido en una IFRAME. Sin embargo, el enlace a sus propias páginas dentro de iframes no representa un riesgo de seguridad para usted o sus usuarios.
Artículo original de Jennifer Krynin. Editado el 7/11/16 por Jeremy Girard
