jQuery fancybox - div specifico dell'obiettivo in iframe

Question

È possibile utilizzare fancybox per caricare un div idid specifco da un'altra pagina invece di caricare l'intera pagina tramite un iframe?

Per esempio posso usare

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

con

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

a caricare tutti 'somepage.html' in iframe, ma come faccio a caricare solo il contenuto da un div con l'id "bersaglio" (per esempio)?

Answer 1

Se la pagina si trova nello stesso dominio della pagina in cui si sta aprendo la finestra di selezione, è possibile utilizzare l'opzione dataFilter di jQuery.ajax per filtrare i dati restituiti nell'ID di destinazione desiderato.

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

Answer 2

Se il metodo Find non funziona per voi, provate filter sulla traiettoria interna DATAFILTER oggetto.

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

Answer 3

puoi indirizzare la parte specifica della pagina utilizzando 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" 
         }); 
        } 
        }); 
        }