ajuste de altura automático de iframe a la altura de su contenido
Publicado por seba64 (1 intervención) el 21/09/2016 00:32:52
ajuste de altura automático de iframe a la altura de su contenido
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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>
Valora esta pregunta
0