在iframe的内容上使用Javascript

Question

我有一个包含一些选项卡式内容的页面。有几个选项卡包含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高度的合理数字。

是否有另一种方法使两者兼容？

Vlad提出的解决方案：我不得不使用jQuery版本的visibility = hidden，而不是jQuery版本的display：none。这实际上并不存在于jQuery中，所以我从another StackOverflow question中发现了如何编写自己的函数来完成它。

最终的脚本是

(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，采取的麻烦看一下我的问题，并给他们的想法。

Answer 1

看来你不能得到正确的高度或宽度的iframe没有设置它首先可见。那是当其风格的display设置为none（通过调用hide()方法）。您是否试图将“可见性”设置为hidden，然后查看它是否有所作为？

如果没有，那么解决方案之一将覆盖以绝对定位的div标签式区域，然后隐藏股利和调整时的iframe加载标签：

$('#iframeID').load(function() { 
    $('#coverDivID').hide(); 
    checkResize(); // or autoResize(); 
}); 

或者，而不是覆盖div可以使iframe中的所有工作。这意味着在完全加载之前不显示iframe的内容。也就是说，在iframe中有一个小的div显示加载进度（一个图标或“Please，wait ...”消息）。当iframe的内容被加载时，它会删除进度div并显示其内容。然后使用上面的方法调整选项卡的大小。如果iframe的内容没有与容器不同的可见边框或背景，这将工作。否则，你仍然会看到跳跃。