在iframe的内容上使用Javascript
我有一个页面上有一些选项卡式的内容。 有几个选项卡包含iframe，我使用一个方便的小脚本来调整iframe的大小以适应其内容。 它的
function autoResize(id){
var newheight;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
}
newheight=(newheight)+40; // Makes a bit of extra room
document.getElementById(id).height= (newheight) + "px";
}
今天我添加了一个小小的jQuery脚本来停止显示标签区域，直到完全加载。 当加载完成时，这会阻止标签进行难看的小跳跃。 这是脚本：
$(document).ready(function(){
$("#tabber").hide();
$("#loading").hide();
$("#loading").fadeIn(1000);
});
$(window).load(function(){
$("#loading").hide();
$("#tabber").fadeIn(300);
});
加载div包含加载图标，tabber div是选项卡区域的全部内容。
该脚本也停止了iframe调整大小的工作。 为了更好地理解它，我添加了另一个脚本：
function checkResize(id){
var win=document.getElementById(id).contentWindow.document.body.scrollHeight;
alert(win);
果然，“赢”成为零。 如果我删除$（“＃tabber”）。hide（）行，“win”会显示iframe高度的合理数字。
有两种方法可以兼容吗？
弗拉德提出了解决方案：我不得不使用jQuery版本的visibility = hidden，而不是jQuery版本的display：none。 这实际上并不存在于jQuery中，所以我从另一个StackOverflow问题中找到了如何编写自己的函数来完成它。
最后的脚本是
(function($) {
$.fn.invisible = function() {
return this.each(function() {
$(this).css("visibility", "hidden");
});
};
$.fn.visible = function() {
return this.each(function() {
$(this).css("visibility", "visible");
});
};
}(jQuery));
$(document).ready(function(){
$("#tabber").invisible();
$("#loading").hide();
$("#loading").fadeIn(1000);
});
$(window).load(function(){
$("#loading").hide();
$("#tabber").visible();
});
感谢弗拉德和RAS，因为不厌其烦地看着我的问题并提出他们的想法。
看来你不能获得正确的高度或宽度的iframe没有设置它首先可见。 那是当它的样式display设置为none （通过调用hide()方法）。 您是否尝试将“可见性”设置为hidden然后查看它是否有所作为？
如果不是，那么其中一个解决方案将覆盖带有绝对定位div的标签区域，然后在加载iframe时隐藏该div并调整标签大小：
$('#iframeID').load(function () {
$('#coverDivID').hide();
checkResize(); // or autoResize();
});
或者，您可以使用iframe中的所有工作来代替覆盖div。 这意味着在完全加载之前不显示iframe的内容。 也就是说，在iframe中有一个小的div显示加载进度（一个图标或“Please，wait ...”消息）。 当iframe的内容被加载时，它会删除进度div并显示其内容。 然后使用上面的方法调整选项卡的大小。 如果iframe的内容没有与容器不同的可见边框或背景，这将工作。 否则，你仍然会看到跳跃。
链接地址: http://www.djcxy.com/p/83563.html