Comunidad de diseño web y desarrollo en internet

ajuste de altura automático de iframe a la altura de su contenido

Citar            
MensajeEscrito el 20 Sep 2016 10:36 pm
Como dice el titulo, estoy tratando de hacer un código en jquery y css que cuando el contenido de un iframe cambie, se ajuste el alto del iframe a su contenido lo más preciso posible, evitando la aparición de la barra de scroll vertical.

Este es el código que escribí, donde no logro que se actualice el tamaño del iframe.
Espero que al ver esto en funcionamiento vean lo que yo no vi y me ayuden a solucionar el problema.

index.htm

Código :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="https://code.jquery.com/query-1.11.2.min.js"></script>
<script>
   $(document).ready(function(e) {
      $("#topf").attr("src","setting.php");
    });
   function resizeTopF(nn){
      alert('index height='+nn);
      nn=nn+'px';
      $("#topf").css('height',nn); 
   }
</script>
</head>
<style>
   body{background-color:#000000; color:#fff;}
   #topf{top:0px;left:0px; width:100%; border:none;height:auto;}
</style>
<body>
<h1>INDEX</h1>
<iframe id="topf"></iframe>
</body>
</html>


setting.htm

Código :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
   $("document").ready(function() {
        $("#btn1").click(function() {$("#topf").attr("src","op1.php");});
        $("#btn2").click(function() {$("#topf").attr("src","op2.php");});
        $("#btn3").click(function() {$("#topf").attr("src","op3.php");});
    });
   function tamaño(){
      h=document.body.scrollHeight;
      alert('h'+h);
      window.parent.resizeTopF(h);
   }
   function resizeTopF(nn){
      //alert('index height='+nn);
      nn=nn+'px';
      $("#topf").css('height',nn); 
      alert('index height='+$("#topf").css('height'));
   }
</script>
</head>
<style>
   body{background-color:#fff;}
   #topf{top:0px;left:0px; width:100%; border:none; height:400px;}
   #btn1,#btn2,#btn3{ width:100px; display:inline-block;}
</style>
<body id="bod">
    <h2>setting</h2>
    <div id="btn1">btn1</div>
    <div id="btn2">btn2</div>
    <div id="btn3">btn3</div>
    <iframe id="topf"></iframe>
</body>
<script>
   tamaño();
</script>
</html>


op1.htm

Código :

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Documento sin título</title>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>
   function tamaño(){
      h=document.body.scrollHeight;
       window.parent.resizeTopF(h);
   }
    </script>
</head>

<style>
   div{width:100%; height:250px; background-color:#33CC99; text-align:center;}
</style>
<body>
   <div>OP1</div>
</body>
<script>
   tamaño();
</script>
</html>


op2.htm

Código :

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Documento sin título</title>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>
        function tamaño(){
            h=document.body.scrollHeight;
            window.parent.resizeTopF(h);
        }
    </script>
</head>
<style>
   div{width:100%; height:500px; background-color:#CC6600; text-align:center;}
</style>
<body>
   <div>OP2</div>
</body>
<script>
   tamaño();
</script>
</html>


op3.htm

Código :

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Documento sin título</title>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>
        function tamaño(){
            h=document.body.scrollHeight;
            window.parent.resizeTopF(h);
        }
    </script>
</head>
<style>
   div{width:100%; height:1000px; background-color:#CCFF66; text-align:center;}
</style>
<body>
   <div>OP3</div>
</body>
<script>
   tamaño();
</script>
</html>

Por seba64

1 de clabLevel



 

firefox
Citar            
MensajeEscrito el 26 Sep 2016 01:42 pm
Por que dos niveles de iframes? El principal tiene un iframe que a su vez tiene otro, y llaman en cascada a una función en su parent para cambiar de tamano ... es casi una garantía de fracaso.
Considera si no puedes tener un solo iframe en donde cargues todo, moviendo los botones al principal. Luego llama a tamano cuando termina de cargar el documento en el iframe (en el onload) y no inmediatamente.

Jorge

Por solisarg

BOFH

13299 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.