在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);
 });

loading div包含一个loading图标，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中并不存在，所以我从如何编写自己的函数中了解到了这一点

最后的剧本是

(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();
     });

---

我要感谢Vlad和RAS，感谢他们不厌其烦地查看我的问题并给出他们的想法。

如果不先将iframe设置为可见，您似乎无法获得iframe的正确高度或宽度。此时，其样式的

显示设置为
none
（通过调用
hide（）
方法）。您是否尝试将“可见性”设置为
hidden
，并查看它是否有所不同

如果没有，则其中一种解决方案是使用绝对定位的div覆盖选项卡区域，然后在加载iframe后隐藏该div并调整选项卡大小：

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

或者，代替覆盖div，您可以在iframe中完成所有工作。这意味着在完全加载之前不显示iframe的内容。也就是说，在iframe中有一个小div，其中显示加载进度（一个图标或一条“请等待…”消息）。加载iframe的内容时，它将删除进度div并显示其内容。然后使用上述方法调整选项卡的大小。如果iframe的内容没有与容器不同的可见边框或背景，则可以这样做。否则，您仍然会看到跳转。
您是否尝试将调整大小的内容打包到文档准备就绪或窗口加载中？我尝试过，但没有成功。您是一流的，弗拉德。这就是解决办法。请参阅我对原始问题的编辑。