0

我有一个页面，上面有一些选项卡式内容。几个选项卡包含 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 中实际上并不存在，所以我从另一个 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();
     });

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

4

1 回答 1

0

如果不先将其设置为可见，您似乎无法获得 iframe 的正确高度或宽度。那是它的样式display设置为none（通过调用hide()方法）的时候。您是否尝试将“可见性”设置为hidden，看看它是否有所作为？

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

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

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

于 2013-03-19T18:35:02.963 回答