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

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

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

Answer 1

似乎您无法在未设置iframe的情况下获得iframe的正确高度或宽度。那时它的样式display设置为none（通过调用hide()方法）。您是否尝试将“公开程度”设置为hidden，看看它是否有所作为？

如果没有，那么其中一个解决方案将覆盖带有绝对定位div的选项卡区域，然后隐藏该div并在加载iframe时调整选项卡的大小：

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

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

在iframe的内容上使用Javascript

1 个答案: