para imagen emplea atributo html5 iframe attributes

imagen - atributo title html5



Atributo sin fisuras iFrame de HTML5 (10)

en HTML5, el iframe tiene nuevos atributos como ''seamless'' que deberían eliminar los bordes y las barras de desplazamiento. Lo probé, pero parece que no funciona, todavía puedo ver las barras de desplazamiento y las fronteras (estoy usando Google Chrome como navegador), aquí está mi código:

<iframe seamless="seamless" title="google" width="600" height="300" src="http://www.google.co.uk"></iframe>

¿Alguna idea de por qué no está funcionando?

Una pregunta más, ¿es posible orientar una sección específica de la página dentro del iframe?

Actualizado: octubre de 2016

El atributo seamless ya no existe. Originalmente se montó para incluirse en la primera especificación HTML5, pero posteriormente se eliminó. Un atributo no relacionado del mismo nombre hizo un breve cameo en el borrador de HTML5.1, pero también fue descartado a mediados de 2016:

Así que creo que la esencia de todo esto, tanto desde el lado del implementador como desde el lado del desarrollador web, es que la seamless tal como se especifica no parece ser lo que alguien quería comenzar. O al menos es más de lo que alguien realmente quería. Y de todos modos, como dice @annevk , parece que ha pasado mucho tiempo "superado por los acontecimientos" a la luz de Shadow DOM.

En otras palabras: purgue el atributo seamless de su memoria y pretenda que nunca existió.

Para la posteridad, aquí está mi respuesta original de hace cinco años:

Respuesta original: abril de 2011

El atributo está en modo borrador en este momento. Por ese motivo, ninguno de los navegadores actuales lo respalda todavía (ya que la implementación está sujeta a cambios). Mientras tanto, lo mejor es usar CSS para quitar los bordes / barras de desplazamiento del iframe:

iframe[seamless]{ background-color: transparent; border: 0px none transparent; padding: 0px; overflow: hidden; }

Hay más en el atributo seamless de lo que se puede agregar con CSS: parte del razonamiento detrás del atributo era permitir que el contenido anidado heredara los mismos estilos aplicados al iframe (actuando como si el documento incrustado fuera uno grande anidado dentro del elemento, por ejemplo).

Por último, las versiones de Internet Explorer (8 y anteriores) requieren atributos adicionales para eliminar los bordes, las barras de desplazamiento y el color de fondo:

<iframe frameborder="0" allowtransparency="true" scrolling="no" src="..."></iframe>

Naturalmente, esto no valida. Entonces depende de usted cómo manejarlo. Mi enfoque (exigente) sería olfatear la cadena del agente y agregar los atributos para las versiones de IE anteriores a 9.

Espero que ayude. :)

Aún en 2014, iframe sin fisuras no es totalmente compatible con todos los principales navegadores, por lo que debe buscar una solución alternativa.

En enero de 2014, iframe sin problemas aún no es compatible con Firefox ni IE 11, y es compatible con Chrome, Safari y Opera (la versión de webkit)

Si desea comprobar esto y otras opciones más compatibles en detalle, el sitio de prueba de HTML5 sería una buena opción:

http://html5test.com/results/desktop.html

Puede consultar diferentes plataformas, en la sección de puntaje puede hacer clic en cada navegador y ver qué se admite y qué no.

De acuerdo con la última recomendación de HTML5 del W3C (que probablemente sea el estándar final de HTML5) publicada hoy, ya no hay ningún atributo integrado en el elemento iframe . Parece haber sido eliminado en algún lugar del proceso de estandarización.

Según caniuse.com ningún navegador importante admite este atributo (nunca más), por lo que probablemente no deberías usarlo.

No es compatible correctamente todavía.

Chrome 31 (y posiblemente una versión anterior) admite algunas partes del atributo, pero no es totalmente compatible.

No pude encontrar nada que cumpliera con mis requisitos, ya que se me ocurrió este script (depende de jQuery):

https://gist.github.com/invernizzie/95182de86ea9dc5daa80

Cambiará el tamaño del iframe al tamaño de la ventana gráfica (teniendo en cuenta un contenido más amplio). Se podría utilizar una mejora para usar la altura de la ventana gráfica en lugar de la altura del contenido, en el caso de que la primera sea más grande.

Pensé que esto podría ser útil para alguien:

en la versión 32 de Chrome, aparece un borde de 2 píxeles alrededor de iframes sin el atributo seamless. Se puede eliminar fácilmente agregando esta regla de CSS:

iframe:not([seamless]) { border:none; }

Chrome usa el mismo selector con estos estilos predeterminados de agente de usuario:

iframe:not([seamless]) { border: 2px inset; border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; }

Solo necesitas escribir

sin costura

en tu código No hay necesidad de:

seamless = "seamless"

Me acabo de enterar de esto yo mismo.

EDITAR - esto no elimina las barras de desplazamiento. Extrañamente

scrolling = "no" todavía parece funcionar en html5. He intentado utilizar la función de desbordamiento con un estilo en línea recomendado por html5, pero esto no funciona para mí.

Utilice el atributo frameborder en su iframe y configúrelo en frameborder = "0". Eso produce la apariencia perfecta. Ahora quizás quieras decir que quiero que el iframe anidado controle, más bien tengo barras de desplazamiento. Luego, necesita batir un archivo de script de JavaScript que calcule la altura menos los encabezados y configure la altura. Debounce es el complemento de javascript necesario para asegurarse de que el tamaño funciona correctamente en los navegadores más antiguos y, a veces, en cromo. Eso te llevará en la dirección correcta.