Проблема с перегрузкой colorbox содержимого iframe на colorbox.resize - PullRequest
Новая
       27

Проблема с перегрузкой colorbox содержимого iframe на colorbox.resize

0 голосов
/ 16 сентября 2011

Я использую colorbox (плагин jquery) для отображения многоэтапного процесса регистрации. Я использую colorbox в режиме "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 как бы перезапускает все это с самого начала? ...

1 Ответ

2 голосов
/ 29 сентября 2011

Я нашел решение здесь: http://groups.google.com/group/colorbox/browse_thread/thread/fadc3d68ca764de3/c38fa24136a6abd7?pli=1

Добавлено это в colorbox.js (ColorBox v1.3.17.2, прямо перед publicMethod.resize на r 533): 

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