Resi Vaja Resi Vaja - 3 months ago 11
HTML Question

how change resize iframe when inner file window size change?

I have one html file "second.html" in which i want to display one frame and that contain src="one.html" and height is "320px" and scrolling = no

If one.html file content increased same time i also want to change height of second.html's iframe height.

There is auto scrolling off so we can not resize it.

Answer

I Found your answer

one.html

<!DOCTYPE html>
<html >
<head>
<title>Page Title</title>
</head>
<body >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
        window.parent.document.getElementById("hina").style.height=$("#upperdiv").height()+'px';
    });
    $("#show").click(function(){
        $("p").show();
        window.parent.document.getElementById("hina").style.height=$("#upperdiv").height()+'px';
    });
});
</script>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<div id="upperdiv">
  <p>If you click on the "Hide" button, I will disappear.<br>one<br><br>Two<br><br>Three<br><br>Four<br><br>Five<br><br>Six<br><br>Seven<br><br>Eight<br><br>Nine<br><br>Ten<br><br><br></p>
  <button id="hide">Hide</button>
  <button id="show">Show</button>
</div>

</body>
</html>

c.html

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<iframe src="one.html" height="320" frameborder="1" scrolling="yes" id="hina" />
</body>
</html>

In this code while you click on hide then your one.html file content size will be decrease so you want to resize main frame size at same time so for that i had taken hide/show button to achieve that one

Try this is runnable code ...