jQuery Colorbox Iframe и Селектор - PullRequest
Новая
       32

jQuery Colorbox Iframe и Селектор

0 голосов
/ 04 января 2011

У меня есть это: 

$("a.money").colorbox({href:$("a.money").attr("href")+" div#content"});

Открывает наложение, но только содержимое в селекторе #content. Если я добавлю iframe: true, это больше не будет работать. Есть ли способ заставить его работать с iframe?

Edit: Самым близким, что я мог заставить его работать, было сделать это: 

$("a.money").colorbox({iframe:true, width:700, height:425,
    onComplete: function() {
        alert('test');
        $test = $("#cboxLoadedContent iframe").contents().find("#content").html();
        $("#cboxLoadedContent iframe").contents().find("#container").html($test);
    } 
});

Хотя без предупреждения оно не работает, я изучил это и думаю, что мне нужно использовать .live (), что привело меня к попытке: 

$('a.money').live('click', function() { 
    url = this.href; // this is the url of the element event is triggered from
    $.fn.colorbox({href: url, iframe:true,width:700, height:425,
        onComplete: function() {
            $test = $("#cboxLoadedContent iframe").contents().find("#content").html();
            $("#cboxLoadedContent iframe").contents().find("#container").html($test);
        } 
    });
    return false;
});

Не сработало, мне все еще нужно было добавить предупреждение, чтобы оно заработало.

На случай, если вам интересно, что я пытаюсь сделать. Веб-страница загружается в iframe со всеми элементами в #container, так что включает в себя #header, #sidebars, но я хочу только показать #content внутри iframe. Однако это привело меня к другой проблеме, которую я осознал. Предполагая, что это работает без предупреждения, оно будет работать только для этой начальной страницы. Например, если я загрузил форму в iframe, после отправки формы я бы снова увидел весь макет, а не только часть #content. Можно ли продолжать показывать только #content часть страницы при дальнейшей навигации?

Ответы [ 3 ]

5 голосов
/ 09 апреля 2011

Причина, по которой ваш исходный код не работал без предупреждения, заключалась в том, что помимо необходимости использования функции "onComplete", вам также необходимо событие загрузки в iframe. Оповещение дало время загрузки iframe, что заставило ваш код правильно отображаться.

Итак, это должно было выглядеть так: 

$("a.money").colorbox({iframe:true, width:700, height:425,
    onComplete: function() {
        $("#cboxLoadedContent iframe").load(function(){
              $test = $(this).contents().find("#content").html();
              $(this).contents().find("#container").html($test);
    });
    } 
});
0 голосов
/ 04 января 2011

Я нашел альтернативное решение в соответствии с кодом, найденным в этих темах:

http://groups.google.com/group/colorbox/browse_thread/thread/9a54137b8cae96c5/11d37ea7ab72562f http://groups.google.com/group/colorbox/browse_thread/thread/8a0deec97202e27c/2e7524b87931a89e

Он не использует iframe, но это более или менее точно то, чтоЯ хотел.

0 голосов
/ 04 января 2011

Это должно работать. 

  $("a.money").colorbox({ href:"#content", inline: true, iframe: true });
  <div id='content'>Any content here</div>
  <a class='money' href="#">question</a>
...