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

我正在使用colorbox（jquery插件）显示多步注册过程。我在“ iframe”模式下使用颜色框。

$('#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会从头开始重新启动所有内容吗？...

最佳答案

我在这里找到了解决方案：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);
    });
 });

为了绑定colorbox函数，我使用了以下选项：

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

关于javascript - Colorbox在colorbox.resize上重新加载iframe内容时出现问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7448628/