colorbox在colorbox.resize上重新加载iframe内容的问题

Problem with colorbox reloading the iframe content on colorbox.resize

本文关键字：colorbox iframe 问题 加载 resize 新加载      更新时间：2023-09-26

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

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

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

我在iframe内容中使用以下代码(只是在文档末尾附近的script标签中):

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

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

parent.$.colorbox.resize();

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

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

更新:如果我把上面的脚本(简单版本)放在第二步而不是第一步，我避免了无限循环，但是当我点击进入第二步时，第一步实际上被加载而不是第二步。同样的道理，如果我把这个脚本放到第三步:第一步会被加载。
所以，当执行它的"resize"函数时，colorbox似乎是从一开始就重新开始的…

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

将此添加到ColorBox .js (ColorBox v1.3.17.2)，就在publicMethod之前。

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
});
相关文章：