javascript - colorbox 在 colorbox.resize 上重新加载 iframe 内容时出现问题

Question

我正在使用 colorbox(jquery 插件)来显示多步骤注册过程。我在“iframe”模式下使用 colorbox。

$('#signup').colorbox({
    width:     '500px', 
    height:    '250px', 
    opacity:   '.5',
    scrolling: false,
    fixed:     true,
    iframe:    true
});

由于不同步骤的内容具有不同的高度，我希望 colorbox 在加载新步骤时自动调整自身大小。

我在 iframe 内容中使用以下代码(只需在文档末尾附近的脚本标记中):

$(function() {
    var iH = $(document.body).height();
    console.log("iframe height: " + iH);
    parent.$.colorbox.resize('height', iH);
}); 

在此之前我尝试过一个更简单的版本:

parent.$.colorbox.resize();

但是在这两种情况下，我最终都遇到了似乎是无限循环的情况:iframe 的内容不断地重新加载，并且从未实际显示(我实际上有时可以看到它闪烁)。iframe 在此过程中调整大小(在第一个循环期间)，因此它似乎部分工作。然而，新尺寸对于预期内容来说似乎太小，所以我真的不知道......

知道为什么这不起作用以及如何解决这个问题吗？

更新:如果我将上述脚本(简单版本)放在第二步而不是第一步，我可以避免无限循环，但是当我单击转到第二步时，实际上加载了第一步而不是第二步。
如果我将此脚本放在第三步上，情况也是如此:改为加载第一步。
所以看起来当执行它的“调整大小”功能时，colorbox 会从头开始重新启动它？...

Answer 1

我在这里找到了解决方案:http://groups.google.com/group/colorbox/browse_thread/thread/fadc3d68ca764de3/c38fa24136a6abd7?pli=1

将此添加到 colorbox.js(ColorBox v1.3.17.2，就在 r 533 上的 publicMethod.resize 之前):

publicMethod.myResize = function (iW, iH) { 
 if (!open) {
    return;
 }
 if (settings.scrolling) {
    return;
    }
 var speed = settings.transition === "none" ? 0 : settings.speed;
 $window.unbind('resize.' + prefix);
 settings.w = iW;
 settings.h = iH;
 $loaded.css({
    width: settings.w,
    height: settings.h
 });
 publicMethod.position(speed);
}; 

我将其添加到 iframe 中打开的页面中:

 $(document).ready(function (){
    $(window).bind('load', function () {
        var frameWidth = $(document).width();
        var frameHeight = $(document).height();
        parent.$.fn.colorbox.myResize(frameWidth, frameHeight);
    });
 });

为了绑定(bind)颜色框函数，我使用了以下选项:

$('.item').colorbox({
    transition: 'none',
    iframe      : true,
    scrolling   : false
});