jQuery fancybox - указывать целевой div #id в iframe

Question

Можно ли использовать fancybox для загрузки указанного div #id с другой страницы вместо загрузки всей страницы через iframe?

Например, я могу использовать

 $('#link-whole').fancybox({
                'width'             : '80%',
                'height'            : '80%',
                'type'              : 'iframe',
            });

с

<a id="link-whole" href="somepage.html">link 1</a>

, чтобы загрузить весь файл somepage.html в iframe, но как мне загрузить JUST содержимое из div с идентификатором "target" (например)?

Answer 1

Если страница находится в том же домене, что и страница, на которой вы открываете fancybox, тогда вы сможете использовать параметр dataFilter jQuery.ajax , чтобы отфильтровать возвращенные данные до цели. ID, который вы хотите.

$('#link-whole').fancybox({
    'width': '80%',
    'height': '80%',
    'type': 'ajax',
    'ajax': {
        dataFilter: function(data) {
            return $(data).find('#yourTargetID')[0];
        }
    }
});

Answer 2

Если метод find не работает для вас, попробуйте filter в строке внутри объекта dataFilter.

    return $(data).filter('#yourTargetID')[0];

Answer 3

Вы можете настроить таргетинг на определенную часть страницы, используя beforeShow

                  function opendialog(mypage) {
                  var linktoopen=mypage ;
                    $.fancybox({                        
                    'autoScale': false,
                    'transitionIn': 'elastic',
                    'transitionOut': 'elastic',
                    'speedIn': 500,
                    'speedOut': 300,                    
                    'width'         :  800,
                    'height'        :   410,
                    'autoDimensions': false,
                    'centerOnScroll': true,
                    'scrolling'   : 'no',
                    'type' :  'iframe',
                    'href' : linktoopen,
                      beforeShow: function(){
                          $(".fancybox-iframe").css({
                          margin  : "-380px 0 0",
                         height:"790px"
                       });
                     }
                    });
                    }