Iframes & IE

subzero · #1 18-02-2009

Buenas tardes.

Estoy haciendo una pagina utilizando PHP en la cual tengo un marco superior, uno inferior, y uno a la izquierda en el cual tengo varios botones que al momento de pulsar en cualquiera de ellos se carga a la derecha una pagina en un iframe, hasta aqui todo esta bien, la cuestión es que de un momento a otro IE solo permite mostrar la primera pagina o aquella que es llamada con el primer botón, hice la prueba en mozilla y funciona como debe funcionar un botón para cada página, a que se debe esto?

Pongo a continuación el codigo desde el cual valido el boton presionado y direcciono la página a mostrar.

Código PHP:


			
<?php        

   if(@$_POST['bProgVisitas'])

   {echo '<iframe src="vprogvisitas.php" width="640" height ="400" scrolling="auto" frameborder="0"></iframe>';}         

   else

   {       

    if(@$_POST['bPrespuesto'])

    {echo '<iframe src="vpresupuesto.php" width="640" height ="400" scrolling="auto" frameborder="0"></iframe>';}

       

    if(@$_POST['bCumPreVent'])         

    {echo '<iframe src="vcump_presupuesto_venta.php" width="640" height ="400" scrolling="auto" frameborder="0"></iframe>';}

       

    if(@$_POST['bHistVisitas'])         

    {echo '<iframe src="vhistoria_visitas.php" width="640" height ="400" scrolling="auto" frameborder="0"></iframe>';}

        

    if(@$_POST['bClientes'])         

    {echo '<iframe src="vmovimiento.php" width="640" height ="400" scrolling="auto" frameborder="0"></iframe>';}    

      

    if(@$_POST['bPrueba'])         

    {echo '<iframe src="vgestion_cliente_p.php" width="620" height ="400" scrolling="auto" frameborder="0" target="_parent"></iframe>';}

   }    

?>

Agradeciendo siempre por su colaboración....

Ñuño Martínez · #2 19-02-2009

Cita:

Empezado por subzero

(...) la cuestión es que de un momento a otro IE solo permite mostrar la primera pagina o aquella que es llamada con el primer botón, hice la prueba en mozilla y funciona como debe funcionar un botón para cada página, a que se debe esto?

Simple y llanamente a que Mozilla sigue más de cerca las normas de la W3C que el Internet Explorer. Al IE7 se le puede "decir" que siga estas normas añadiendo una etiqueta al código HTML, pero dicha etiqueta no forma parte de dicha norma, así que se entra en una paradoja (es posible que las últimas versiones del IE7 no actúe así).

De todas formas, revisa la configuración del IE por si tiene algo desactivado.

subzero · #3 19-02-2009

Nuño, gracias por tu aporte, pero me podrias colaborar un poco más con el manejo de esta etiqueta pues he estado investigando en internet y la verdad no tengo muchos conocimientos acerca de esto. Gracias

roman · #4 19-02-2009

He estado haciendo algunas pruebas y no veo ninguna falla, ni en IE ni en Firefox. Sería bueno que pusieras el código html del frameset y del marco con los botones.

Por otra parte, no entiendo para que cargas el contenido en un iframe en lugar de cargarlo directamente en el marco de la izquierda, ¿cuál es la razón?

// Saludos

subzero · #5 19-02-2009

Hola roaman, gracias por interezarte en mi tema, pues la idea es que corrigiendo lo que habia comentado anteriormente tengo 3 marcos

1. Superior
2. Medio.
3. Bajo

En el medio tengo una tabla, la cual esta dividida en dos columnas en la primera están los botones que al ser presionados cargan las páginas en la siguiente columna.

el codigo de la pagina que muestra esto es la siguiente:

Código PHP:


			
<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>

<link href="estilo.css" rel="stylesheet" type="text/css" />

<?php include('funciones.php'); validar_sesion();?>

</head>



<body>

<table width="753" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000066" >

  <tr>

    <td width="92" valign="top"><form id="form1" name="form1" method="post" action="">

      <table width="80" border="0" cellpadding="0" cellspacing="0" class="botonmenu">

        <tr>

          <td><button name="bProgVisitas" type="submit" class="botonmenu" value="Enviar"><table><tr><td><img src="imagenes/iconos/agenda_date.gif" width="20" height="20"></td><td>Prog. de Visitas</td></tr></table></button></td></tr>       

        <tr>

          <td><button name="bPrespuesto" type="submit" class="botonmenu" value="Ventas"><table><tr><td width="24"><img src="imagenes/iconos/icons/money_dollar.png" width="20" height="20">

          </td>

            <td width="62">Presup.</td>

          </tr></table></button></td>

        </tr>        

        <tr>

          <td><button name="bCumPreVent" type="submit" class="botonmenu" value="Ventas"><table><tr><td width="25"><img src="imagenes/iconos/icons/css_valid.png" width="24" height="24"></td>

          <td width="55">Cump. Presup.  </td>

          </tr></table></button></td>

        </tr>

        <tr>

          <td><button name="bHistVisitas" type="submit" class="botonmenu" value="Historia de Visitas"><table><tr><td><img src="imagenes/iconos/icons/application_view_list.png" width="20" height="20"></td><td>Historia de Visitas</td></tr></table></button></td>

        </tr>

        

        <tr>

          <td><button name="bClientes" type="submit" class="botonmenu" value="Ventas"><table><tr><td><img src="imagenes/iconos/gente.gif" width="24" height="24"></td>

          <td>Clientes</td>

          </tr></table></button></td>          

        </tr>

        <tr>

          <td>

            <div align="center"><a href="login.php" target="_parent">Salir Seguro</a></div></td>

        </tr>

        <tr>

          <td><p>&nbsp;</p>

            <p align="center"><a href="vpresupuesto_prueba.php"></a></p></td>

        </tr>

        <tr>

          <td><button name="bPrueba" type="submit" class="botonmenu" value="Ventas"><table><tr><td><img src="imagenes/iconos/stop.gif" width="16" height="16"></td>

          <td>No Tocar.. En serio no tocar! </td>

          </tr></table></button></td>

        </tr>

      </table>

      </form></td>

    <td width="655" valign="top"><?php        

        

       if(@$_POST['bProgVisitas'])

       {echo '<iframe src="vprogvisitas.php" width="640" height ="400" scrolling="auto" frameborder="0"></iframe>';}         

       else

       {       

        if(@$_POST['bPrespuesto'])

        {echo '<iframe src="vpresupuesto.php" width="640" height ="400" scrolling="auto" frameborder="0"></iframe>';}

       

        if(@$_POST['bCumPreVent'])         

        {echo '<iframe src="vcump_presupuesto_venta.php" width="640" height ="400" scrolling="auto" frameborder="0"></iframe>';}

       

        if(@$_POST['bHistVisitas'])         

        {echo '<iframe src="vhistoria_visitas.php" width="640" height ="400" scrolling="auto" frameborder="0"></iframe>';}

        

        if(@$_POST['bClientes'])         

        {echo '<iframe src="vmovimiento.php" width="640" height ="400" scrolling="auto" frameborder="0"></iframe>';}    

      

        if(@$_POST['bPrueba'])         

        {echo '<iframe src="vgestion_cliente_p.php" width="620" height ="400" scrolling="auto" frameborder="0" target="_parent"></iframe>';}

       }    

      ?>

  </tr>

</table>

</body>

</html>

Nuevamente gracias.

roman · #6 19-02-2009

Ok. Entonces parece ser que el problema se restringe a un IFrame. Sigo haciendo pruebas y la verdad es que no encuentro nigún problema con IE7.

De todas formas, insisto, creo que es una manera muy complicada de cargar la página, sobre todo cuando podrías hacerlo sin hacer peticiones al servidor.

Usando javascript puedes cambiar la propiedad src del iframe. Aquí te pongo un ejemplo:

Código PHP:


			
<?php
$frameSource = '';

$paginas = array(
    'bMySQL' => 'http://mysql.com',
    'bPHP' => 'http://php.net',
    'bApache' => 'http://apache.org'
);

if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
    if (isset($_POST['bMySQL']))
    {
        $frameSource = $paginas['bMySQL'];
    }

    if (isset($_POST['bPHP']))
    {
        $frameSource = $paginas['bPHP'];
    }

    if (isset($_POST['bApache']))
    {
        $frameSource = $paginas['bMySQL'];
    }
}

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-1'>
<meta name='generator' content='editplus'>
<meta name='author' content='román sánchez'>

<title> Menú </title>

<script type='text/javascript'>
function cambia(boton)
{
    var marco = document.getElementById('contenido');

    switch (boton.name)
    {
        case 'bMySQL':
            marco.src = '<?php echo $paginas["bMySQL"] ?>';
            break;

        case 'bPHP':
            marco.src = '<?php echo $paginas["bPHP"] ?>';
            break;

        case 'bApache':
            marco.src = '<?php echo $paginas["bApache"] ?>';
            break;
    }

    return false;
}
</script>
</head>
<body>
    <form method='post' action=''>
        <table border='1'>
            <tr>
                <td><button type='submit' name='bMySQL' onclick='cambia(this)'>MySQL</button></td>
                <td rowspan='3'><iframe src='<?php echo $frameSource ?>' id='contenido' name='contenido' width='640' height='480'></iframe></td>
            </tr>
            <tr>
                <td><button type='submit' name='bPHP' onclick='return cambia(this)'>PHP</button></td>
            </tr>
            <tr>
                <td><button type='submit' name='bApache' onclick='return cambia(this)'>Apache</button></td>
            </tr>
        </table>
    </form>
</body>
</html>

Cada botón tiene un evento onclick que llama a la función cambia() de javascript. Esta función se encarga de cambiar el atributo src del iframe dependiendo del botón que la haya llamado.

Si te fijas, dicha función regresa false, evitando así que se realice el submit, esto es, los datos no se envían al servidor y el cambio de página se hace desde el mismo cliente.

Por otra parte, si el usuario tiene deshabilitado el uso de javascript, entonces la función no se llama y se realiza el submit normal. En este caso entra en juego PHP para deterrminar qué boton hizo el envío y, de esta forma, ajustar el valor del src del iframe convenientemente.

Pero aún más. Si en lugar de usar botones usaras enlaces, te evitarías tanto rollo, ya que puedes dirigir el href del enlace directamente al iframe sin necesidad de javascript:

Código PHP:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-1'>
<meta name='generator' content='editplus'>
<meta name='author' content='román sánchez'>

<title> Men&#250; </title>

</head>
<body>
    <form method='post' action=''>
        <table border='1'>
            <tr>
                <td><a href='http://mysql.com' target='contenido'>MySQL</a></td>
                <td rowspan='3'><iframe src='' id='contenido' name='contenido' width='640' height='480'></iframe></td>
            </tr>
            <tr>
                <td><a href='http://php.net' target='contenido'>PHP</a></td>
            </tr>
            <tr>
                <td><a href='http://apache.org' target='contenido'>Apache</a></td>
            </tr>
        </table>
    </form>
</body>
</html>

// Saludos

subzero · #7 19-02-2009

roman, muchas gracias, voy a poner en practica esto que me has mostrado a ver como va, nuevamente muchas gracias.

subzero · #8 19-02-2009

Listo, Roman, revise y funciona perfectamente y mucho má rapido. Gracias

roman · #9 20-02-2009

Por cierto, en el ejemplo con botones, la parte que procesa php puede simplificarse bastante:

Código PHP:


			
<?php
$frameSource = '';

$paginas = array(
    'bMySQL' => 'http://mysql.com',
    'bPHP' => 'http://php.net',
    'bApache' => 'http://apache.org'
);

if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
    $frameSource = $paginas[key($_POST)];
}
?>

// Saludos

subzero · #10 21-02-2009

Gracias... definitivamente queda mucho por aprender.