Bloquear iframe mientras se carga contenido

mariaanie · #1 (**permalink**) 19/12/2008, 07:52

Hola buenas

Tengo un pagina con un IFRAMEPADRE que a su vez carga un IFRAMEHIJO,que es una tabla que muestra consultas a BD, el problema es que quiero bloquear el IFRAMEPADRE hasta que se cargue IFRAMEHIJO, ahora mismo tengo este codigo que solo me bloquea al IFRAMEPADRE hasta que se acabad de cargar:

CODIGO PAGINA PRINCIPAL

<DIV CLASS="bannClass" ID="precarga">
<P CLASS="textoClass" ID="texto1">Transfiriendo información. . .</P>
<P CLASS="textoClass" ID="texto2">Espere por favor. . .</P>
</DIV>

CODIGO EN INFRAME PADRE

en el body en el vento onload llamo a una funcion javascript

function precarga() {
parent.document.getElementById('precarga').style.d isplay='none';
}

despues del body cuando se ha cargado lo desbloqueo

<script>
parent.document.getElementById('precarga').style.d isplay='block';
</script>

Cual es el problema?¿? si bloqueo el IFRAMEPADRE hasta que se cargue entero, eso no incluye al IFRAME HIJO, como puedo hacer para bloquear al padre en funcion del hijo¿?¿?¿?¿?¿? un saludo y gracias

Panino5001 · #2 (**permalink**) 19/12/2008, 08:08

No sé si comprendo bien el problema, pero si es así, mi pregunta es porqué no simplificar el proceso y colocar la capa de entrada y activarla y desativarla sólo cuando cambia de estado del último iframe (el que llamás hijo)?

mariaanie · #3 (**permalink**) 20/12/2008, 06:34

si es buena idea y como puedo bloquear al frame padre mientras carga el hijo?¿?¿

Panino5001 · #4 (**permalink**) 20/12/2008, 09:15

A ver:
Página Principal (top):

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style>
*{padding:0; margin:0}
html,body{height:100&#37;; width:100%}
#loading{ width:100%; height:100%; background-color:#000; opacity:.5; filter:alpha(opacity=50);zoom:1; position:absolute}
</style>
<script>
function $(id){
    return document.getElementById(id);    
}

var asignar=setInterval(function(){
    try{
        var padreDoc=$('padre').contentDocument || $('padre').contentWindow.document;
        var hijo=padreDoc.getElementById('hijo');
    }catch(e){
    }
    if(hijo && typeof hijo!='undefined'){
        if(window.ActiveXObject){//explorer
            $('loading').style.display='none';
            hijo.onreadystatechange=function(){
                $('loading').style.display='block';
                if(hijo.readyState=='complete'){
                       $('loading').style.display='none';
                }
            }
            clearInterval(asignar);
            return;
        }
        try{//safari
            var docNieto=hijo.contentDocument || hijo.contentWindow.document;
            var sc=docNieto.createElement('script');
            sc.text='self.onunload=function(){top.$("loading").style.display="block";}';    
            docNieto.body.appendChild(sc);            
            $('loading').style.display='none';
        }catch(e){}
        hijo.onload=function(){//safari y resto
            var docNieto=hijo.contentDocument || hijo.contentWindow.document;
            var sc=docNieto.createElement('script');
            sc.text='self.onunload=function(){top.$("loading").style.display="block";}';    
            docNieto.body.appendChild(sc);            
            $('loading').style.display='none';
        }
        
        clearInterval(asignar);    

    }
},10);
</script>
</head>
<body>
<div id="loading"></div>
<iframe id="padre" src="hijo.html?hdh" width="500" height="500"></iframe>
</body>
</html>

hijo.html:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>

<body>
<iframe id="hijo" src="nieto.html" width="500" height="500"></iframe>
</body>
</html>

nieto.html: lo que sea.

mariaanie · #5 (**permalink**) 21/12/2008, 07:46

Hola

Yo trabajo con IE, y probe lo que me mandaste, y funciona, el problema que le veo, es que yo quiero que muestre un texto sobre fondo blanco que ponga cargando, mientras carga todo, de momento me muestra una capa gris con opacidad,

Yo tambien estuve mirando y realice esto:

<html>
<body onLoad="habilitarPagina();" style="margin:0px;">
<script>
function habilitarPagina() {
document.getElementById('capa_cargando').style.vis ibility = 'hidden';
document.getElementById('capa_principal').style.op acity = 1;
}
</script>
<style>
.clase_principal {opacity:0.5;}
.clase_cargando {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
}
</style>
<div id="capa_principal" class="clase_principal">

<iframe style="border:0px; width:100%; height:100%;" src="http://www.forosdelweb.com"></iframe>

<iframe style="border:0px; width:100%; height:100%;" src="http://www.google.es"></iframe>
</div>
<div id="capa_cargando" class="clase_cargando">
<div style="position:absolute; top:250px; left:350px; width:200px; height:20px; border:1px solid #FF6666;background-color:#000000;color:#FFFFFF; text-align:center;">
<b>cargando...</b>
</div>
</div>

</body>
</html>

Muchas gracias por la ayuda prestada

Panino5001 · #6 (**permalink**) 21/12/2008, 07:56

Lo del texto sobre la capa no es un problema, se soluciona fácil:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style>
*{padding:0; margin:0}
html,body{height:100&#37;; width:100%}
#loading{ width:100%; height:100%; background-color:#000; opacity:.7; filter:alpha(opacity=70);zoom:1; position:absolute; z-index:100; display:none}
#loading p{ width:100%;text-align:center; color:#FFF; font-size:15px; font-family:Verdana, Arial, Helvetica, sans-serif; position:absolute; top:50%; font-weight:bold}
</style>
<script>
function $(id){
    return document.getElementById(id);    
}

var asignar=setInterval(function(){
    try{
        var padreDoc=$('padre').contentDocument || $('padre').contentWindow.document;
        var hijo=padreDoc.getElementById('hijo');
    }catch(e){
    }
    if(hijo && typeof hijo!='undefined'){
        if(window.ActiveXObject){//explorer
            $('loading').style.display='none';
            hijo.onreadystatechange=function(){
                $('loading').style.display='block';
                if(hijo.readyState=='complete'){
                       $('loading').style.display='none';
                }
            }
            clearInterval(asignar);
            return;
        }
        try{//safari
            if (navigator.userAgent.indexOf('Safari') != -1){
                var docNieto=hijo.contentDocument || hijo.contentWindow.document;
                var sc=docNieto.createElement('script');
                sc.text='self.onunload=function(){top.$("loading").style.display="block";}';    
                docNieto.body.appendChild(sc);            
                $('loading').style.display='none';
            }
        }catch(e){}
        hijo.onload=function(){
            var docNieto=hijo.contentDocument || hijo.contentWindow.document;
            var sc=docNieto.createElement('script');
            sc.text='self.onunload=function(){top.$("loading").style.display="block";}';    
            docNieto.body.appendChild(sc);            
            $('loading').style.display='none';
        }
        
        clearInterval(asignar);    

    }
},10);
</script>
</head>
<body>
<div id="loading"><p>cargando...</p></div>
<iframe id="padre" src="hijo.html?hdh" width="500" height="500"></iframe>
</body>
</html>

Agregué una pequeña mejora para que funcione bien en Safari sin afectar al resto. Creo que es la solución que menos trabajo posterior implica, pero sobre gustos...

mariaanie · #7 (**permalink**) 22/12/2008, 03:31

Hola gracias por la ayuda¡ ahy un problem a ti te va?¿? yo tengo IE 6 y no funciona, no muestra la capa de cargando, hoy estoy en otro equipo y encima el codigo que te pegue yo ayer que funcionaba tampoco va como yo quiero, me imagino que sera problema del navegador no?¿?

Gracias de todos modos

Panino5001 · #8 (**permalink**) 22/12/2008, 04:34

El código que te dejé funciona bien en Explorer 5.5, 6 y 7, en Ópera, en Safari, en Chrome y en Firefox.

mariaanie · #9 (**permalink**) 24/12/2008, 07:25

ok ya lo he solucionado, muchas gracias por la ayuda prestada un saludo