html - example - ¿Puedo cambiar o controlar el color del área IFRAME antes de que se cargue el contenido?
iframe html5 example (4)
No es muy difícil:
<iframe id="IFR" src="time.php" style="background-color: #f00;" />
Editar: olvidé probar en IE, funciona en FireFox. Ejemplo en: http://beta.tagcloud.com/contain.html
El ejemplo demuestra que la página cambia rápidamente a rojo, y luego cuando se carga el iframe (en 5 segundos), cambia a negro.
Posible duplicado:
fb como botón crea un fondo blanco en la carga de la página en todas las versiones ie
Tengo un sitio donde partes del contenido se cargan en IFrames.
El problema que tengo es que el contenido interno del iFrame es blanco hasta que se carga la página y el contenido tiene un color de fondo diferente (azul, en este caso). Así que tengo estos cuadrados blancos en la pantalla hasta que se carguen los contenidos.
¿Hay alguna manera de especificar qué color debe representar el IFrame vacío hasta que tenga contenido?
¿O estoy tomando la táctica equivocada aquí? ¿Hay alguna manera de evitar que la página se reproduzca hasta que los contenidos estén listos para su visualización?
ACTUALIZACIÓN: Parece que el bit de "área blanca" que describo es específico de IE.
Tal vez podría establecer el documento del iframe y establecer su estilo antes de cargar su contenido.
O puede usar Ajax y no tener estos problemas. =] (Asumiendo si es apropiado para la tarea, por supuesto)
Esto me estaba volviendo loco, pero en realidad encontré una solución que parece funcionar en IE6 y 7. No lo he probado en otros navegadores, pero Firefox parece hacerlo bien de todos modos.
El problema se resuelve si el iframe no se muestra al cargar, pero un iframe parece disparar el "onload" inmediatamente así que después de poner una alerta, noté que dispara la carga dos veces, una vez en la carga de la página, y otra vez una vez el iframe la página carga así que ...
<iframe id="theFrame" src="frame.html" style="display:none;" onload="loadFrame();"></iframe> //and here is the associated javascript loadCount = 1; function loadFrame() { if(loadCount > 1) { //this keeps the script from displaying the frame on the first fire document.getElementById(''theFrame'').style.display=''''; return; } loadCount++; }
La forma más sencilla de solucionar esto es simplemente no mostrar el iframe hasta que esté listo. De esta forma puede establecer cualquier fondo que desee bajo el iframe. Establece un fondo y evita mostrar el iframe hasta que se cargue así:
<div style="background-color:#XXXXX">
<iframe src="..." style="visibility:hidden;" onload="this.style.visibility=''visible'';"></iframe>
</div>
El único inconveniente es que si su visitante ha sido desactivado, no verán el iframe. Si eso te preocupa, echa un vistazo a http://css-tricks.com/prevent-white-flash-iframe/