jquery 在加载时获取 iframe 内容的高度 [英] jquery get height of iframe content when loaded
问题描述
我有一个帮助页面 help.php,我正在 main.php 的 iframe 中加载它在 iframe 中加载此页面后,如何获取此页面的高度?
我问这个是因为我无法将 iframe 的高度设置为 100% 或自动.这就是为什么我认为我需要使用 javascript..我正在使用 jQuery
CSS:
body {边距:0;填充:0;}.容器 {宽度:900px;高度:100%;边距:0 自动;背景:银色;}.help-div {显示:无;宽度:850px;高度:100%;位置:绝对;顶部:100px;背景:橙色;}#帮助框架{宽度:100%;高度:自动;保证金:0;填充:0;}
JS:
$(document).ready(function () {$("a.open-help").click(function () {$(".help-div").show();返回假;})})
HTML:
<!-- --><p>这是一个带有 iframe 的 div,用于加载帮助页面</p><iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe><a class="open-help" href="#">在 iFrame 中打开帮助</a><p>你好世界</p><p>你好世界</p><p>你好世界</p><p>你好世界</p><p>你好世界</p>
ok 我终于找到了一个好的解决方案:
$('iframe').load(function() {this.style.height =this.contentWindow.document.body.offsetHeight + 'px';});
因为某些浏览器(旧版 Safari 和 Opera)在 CSS 呈现之前报告加载完成,您需要设置微超时并清空并重新分配 iframe 的 src.
$('iframe').load(function() {setTimeout(iResize, 50);//Safari 和 Opera 需要启动.var iSource = document.getElementById('your-iframe-id').src;document.getElementById('your-iframe-id').src = '';document.getElementById('your-iframe-id').src = iSource;});函数 iResize() {document.getElementById('your-iframe-id').style.height =document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';}
I have a Help page, help.php that I am loading inside an iframe in main.php How can I get the height of this page once it has loaded in the iframe?
I am asking this because I can't style the height of to iframe to 100% or auto. That's why I think I need to use javascript.. I am using jQuery
CSS:
body {
margin: 0;
padding: 0;
}
.container {
width: 900px;
height: 100%;
margin: 0 auto;
background: silver;
}
.help-div {
display: none;
width: 850px;
height: 100%;
position: absolute;
top: 100px;
background: orange;
}
#help-frame {
width: 100%;
height: auto;
margin:0;
padding:0;
}
JS:
$(document).ready(function () {
$("a.open-help").click(function () {
$(".help-div").show();
return false;
})
})
HTML:
<div class='container'>
<!-- -->
<div class='help-div'>
<p>This is a div with an iframe loading the help page</p>
<iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe>
</div> <a class="open-help" href="#">open Help in iFrame</a>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
</div>
ok I finally found a good solution:
$('iframe').load(function() {
this.style.height =
this.contentWindow.document.body.offsetHeight + 'px';
});
Because some browsers (older Safari and Opera) report onload completed before CSS renders you need to set a micro Timeout and blank out and reassign the iframe's src.
$('iframe').load(function() {
setTimeout(iResize, 50);
// Safari and Opera need a kick-start.
var iSource = document.getElementById('your-iframe-id').src;
document.getElementById('your-iframe-id').src = '';
document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
document.getElementById('your-iframe-id').style.height =
document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';
}
这篇关于jquery 在加载时获取 iframe 内容的高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!