dijous, 31 de març del 2011

Un iframe que es redimensiona amb el contingut

Un truc amb javascript: un iframe que es dimensiona per adaptar-se al seu contingut. L'iframe "resizable".

Important: aquest truc només funciona si el contingut de l'iframe pertany al mateix domini que la pàgina contenidora, l'explicació és que el javascript de la pàgina contenidora ha d'accedir al document de l'iframe, i això només és possible entre pàgines del mateix domini.


per a veure com funciona, en un servidor web de proves crearé dues pàgines:

1. Una página amb un text llarg, d'unes quantes línies (el lorem ipsum és un gran candidat...) que serà la que posaré dins de l'iframe.

2. Una pàgina contenidora com aquesta:

<html>
    <head>
    <meta
        content="text/html; charset=ISO-8859-1"     
        http-equiv="content-type">
    <title>prova1.html</title>
    <script language="javascript">
    function MostraMissatge() {
        var v_ifr = document.getElementById("IDIframe");
        v_ifr.style.height = (v_ifr.contentWindow.document.body.scrollHeight + 25) + "px";
        return false;
    }
    </script>
    </head>
    <body>
    <iframe 
        src="pagina.html" 
        id="IDIframe" 
        height="300" width="300" 
        onload="MostraMissatge()">
    </iframe>
</body>
</html>


I, com podreu comprovar, funciona. ;-)

Cap comentari:

Publica un comentari a l'entrada