automatic resize iframe to iframe content

automatic resize iframe to iframe content

Hi, I try to program a jQuery code to automatically change the height of an iframe when the content changes. This is my code :


index.htm

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

<!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 resizeIframe(){
        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>
    resizeIframe();
</script>
</html>


op1.htm

<!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 resizeIframe(){
        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>
    resizeIframe();
</script>
</html>


op2.htm

<!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 resizeIframe(){
            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>
    resizeIframe();
</script>
</html>


op3.htm

<!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 resizeIframe(){
            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>
    resizeIframe();
</script>
</html>