Porque esto no anda en firefox??

tato_arm · #1 (**permalink**) 29/12/2009, 19:19

Hola,
esto se usa en AJAX para la subida de imagenes y su previsualización, por eso el uso de iframes que tiene que ir cambiando el contenido. En este caso no se porque no funciona la siguiente pagina:

Prueba2.html

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento sin título</title>
<STYLE type="text/css">
DIV.update_area1 {border: 1px solid #bbbbbb; font-size: 12pt; width: 400px; height:130px; padding: 5px}
</STYLE>
<script type="text/javascript">
function limpiarDiv(id)
{
var div;
div = document.getElementById(id);
while(div.hasChildNodes()) {
div.removeChild(div.lastChild);
}
}

//Escribir en un div
function rellenarDiv(id)
{
var sethtml = '<iframe name="marco1" id="marco1" width="120" height="130" scrolling="no" frameborder="0" src="prueba2.php"></iframe>';
var div = document.getElementById(id);

//Llamamos a la función limpiarDiv para eliminar el contenido
//actual del div.
limpiarDiv(id);
div.innerHTML = sethtml;
}
function cambiarIframe() {
var sethtml = "Ahora este es el nuevo contenido del iframe";
frames.marco1.document.getElementById('divIframe') .innerHTML = sethtml;
}
</script>
</head>
<body>
<CENTER><div id="update_area1" class="update_area1">
no hay nada<br><br>
</div> <BR><BR>

<input type="button" value="Borrar y cargar div con un iframe" onClick="rellenarDiv('update_area1');"><BR><BR>
<input type="button" value="Cambiar contenido iframe" onClick="cambiarIframe();"><BR><BR>
</CENTER>

</body>
</html>

Y por ultimo, la pagina del iframe: prueba2.php

Cita:

<html>
<head>
<title>Ejemplo de código JavaScript en el propio documento</title>
</head>
<body>
<div id="divIframe">
Div dentro del iframe
</div>
</body>
</html>

Ahora explico lo que pasa en firefox: al presionar el boton "borrar y cargar div con un iframe" carga bien prueba2.php. Luego cambio el contenido del iframe que hay dentro de un div con "cambiar contenido iframe", todo bien hasta alli. Nuevamente borro y cargo el contenido del div update_area1 con el primer boton, bien, y nuevamente trato de cambiar el contenido del iframe .... y ya no funciona!!
es decir funciona en un solo intento. El error que me tira el depurador es:
Error: frames.marco1.document is null
Archivo de origen: http://127.0.0.1/prueba2.html
Línea: 31

¿Que esta pasando?, en el Internet Explorer funciona sin errores.

Gracias por ayudar.

jackson666 · #2 (**permalink**) 29/12/2009, 21:20

En principio no veo que tiene esto que ver con AJAX...

Por otro lado aca:

Código Javascript:

Ver originalvar sethtml = '<iframe name="marco1" id="marco1" width="120" height="130" scrolling="no" frameborder="0" src="prueba2.php"></iframe>';

Le estas "enchufando" eso adentro del div, y no esta del todo bien...
Lo que me parece raro es que conociendo las funciones DOM, no lo hayas hecho bien...

Deberias en vez de "enchufarle" el iframe a lo bestia, crear un elemento iframe, asignarle sus atributos, y luego meterlo en el div con appendChild()

Suerte

tato_arm · #3 (**permalink**) 30/12/2009, 21:43

Gracias por tu ayuda jackson666, pero sigo con el mismo problema. Cambie lo que mencionas de la siguiente forma en la funcion rellenarDiv():

function rellenarDiv(id)
{
//Llamamos a la función limpiarDiv para eliminar el contenido
//actual del div.
limpiarDiv(id);
var div = document.getElementById(id);
var iframe = document.createElement("iframe");
iframe.setAttribute("id","marco1");
iframe.setAttribute("name","marco1");
iframe.setAttribute("width","120");
iframe.setAttribute("height","130");
iframe.setAttribute("frameborder","0");
iframe.setAttribute("src","prueba2.php");
div.appendChild(iframe);

}

Funciona igual que como estaba, y continua fallando en el segundo intento. El error que larga la consola es:
Error: frames.marco1.document is null
Archivo de origen: http://127.0.0.1/ajax_firefox/prueba2.html
Línea: 40

Puedes ver un ejemplo en linea en el siguiente link: http://www.selfpropiedades.com/prueba2.html

Gracias nuevamente por ayudar.

Luis

Panino5001 · #4 (**permalink**) 31/12/2009, 00:01

Para acceder al document de un iframe tenés que usar algo como esto:

Código PHP:

  var docIfr=document.getElementById('iddeliframe').contentDocument || document.getElementById('iddeliframe').contentWindow.document;

Luego, ya teniendo acceso al document del iframe ya podés usar innerHTML:

Código PHP:

  docIfr.body.innerHTML='lo que sea';

Un ejemplo:

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> 
<script> 
onload=function(){ 
    var docIfr=document.getElementById('pp').contentDocument || document.getElementById('pp').contentWindow.document; 
    docIfr.body.innerHTML='<img src="http://static.forosdelweb.com/fdwtheme/isotipocervecero.jpg" />'; 
} 
</script> 
</head> 
 
<body> 
<iframe id="pp" width="500" height="200" /> 
</body> 
</html>

tato_arm · #5 (**permalink**) 31/12/2009, 11:11

Muchas Gracias Panino5001!

Ahora si funciona. y tambien en IExplorer. Cambie a lo siguiente:

Cita:

function cambiarIframe() {
var sethtml=document.getElementById('marco1').contentD ocument || document.getElementById('marco1').contentWindow.do cument;
sethtml.body.innerHTML='Ahora este es el nuevo contenido del iframe';
}

Ya lo voy a estudiar bien, porque no me queda claro lo de la opcion || sin duda en algun manual sale.

Gracias de nuevo y Feliz 2010!!

Luis