使用IFrame
和jQuery.Contents
时出现非常奇怪的情况。
我们有许多报告都建立在单独的页面中,而显示页面则使用jQuery Tabs一次显示许多这些页面。
这些报告的大小取决于用户的数据和输入,因为它们可以变化,因此我们需要将IFrame的高度动态设置为内容的高度。为了获得内容的高度,我正在使用以下代码:
var iframeHeight = $(this).contents().height();
iframeHeight += 50;
console.log(iframeHeight);
这段代码在首次加载时效果很好,但是在IFrame回发/刷新后,无论子页面的实际内容如何,记录的
iframeHeight
总是比以前的高度83px
大。i.e. First report is 500px high,
Second report should be 300px high
but $(this).contents().height(); returns 583px.
这是一个示例jsFiddle来演示此问题。如果打开控制台,然后单击IFrame左上方的
JSFiddle
图标,您会注意到记录的高度将比以前的高度高83px
。有什么可以解释这个问题的吗?
我是否错过了
jQuery.Contents
函数的工作原理?如果这种方法行不通,是否有更好的方法来获取内容高度? (我试过了身体的高度+
form
对象的高度,但这在IE中不起作用)。在IE10 + Chrome版本31.0.1650.57 m中进行了测试
最佳答案
这是一个似乎可行的实现(用于扩展/缩小内容。)
假设iframe的src来自同一个域,并且没有脚本会在加载后调整iframe内容的大小
$(document).ready(function() {
$('#frameID').on('load', function () {
$('#ReportBuild').hide()
$(this).show();
var iframeHeight = $(this.contentDocument.documentElement).outerHeight(true);
$(this).css({ height: iframeHeight + 'px' });
this.contentWindow.onbeforeunload = function () {
$('.tabFrame').hide();
$('#ReportBuild').show();
}
});
});
http://jsfiddle.net/rq5S5/8/上的演示
关于javascript - jQuery.contents()给出一个奇怪的结果,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20347540/