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> 
