Zewnętrzny plik HTML w treści Bootstrap Popover

Question

Gdy używam elementu iframe do ładowania zewnętrznego pliku html w treści popover, ogranicza się to do wysokości wyskakujących okienek. Ale chcę, aby wysokość wyskakującego okna była automatyczna. Ktoś mi pomoże.!

$(document).ready(function(){ 
    $('.pop-right').popover({ 
title : 'Loading External File', 
html : true, 
placement : "right", 
content: function() { 
     return '<iframe src="popover-content.html" style="border:none"></iframe>';  
     }); 
    } 
    }); 
}); 

Answer 1

Gdy nie są cross-Domaining”, to znaczy nie jesteś ładowania google.com lub podobny do iframe, jest stosunkowo łatwe.

stwierdzenie poniżej funkcji, która przyjmuje element popover (.pop-right) i zawartość popover jako parametry:

function adjustPopover(popover, iframe) { 
    var height = iframe.contentWindow.document.body.scrollHeight + 'px', 
     popoverContent = $(popover).next('.popover-content'); 
    iframe.style.height = height; 
    popoverContent.css('height', height); 
} 

1) uzyskać scrollHeight iframe (rzeczywista wysokość)
2) uzyskać .popover-content<div> związane z .pop-right
3) ustaw .popover-content na rzeczywistą wysokość i zrób to samo z , aby uniknąć pasków przewijania.

Następnie w popover inicjalizacji połączenia adjustPopover() w iframe onload zdarzenia z onload="adjustPopover(".pop-right", this);":

$('.pop-right').popover({ 
    title : 'Loading External File', 
    html : true, 
    placement : "right", 
    content: function() { 
     return '<iframe src="content.html" style="border:none" onload="adjustPopover(&quot;.pop-right&quot;, this);"></iframe>';  
    } 
}); 

To jest dobry pomysł, aby ustawić minimalną wysokość dla iframe. Jeśli tego nie zrobisz, popover zawsze będzie miał przynajmniej domyślną wysokość przeglądarki iframe, w chrome 150px.

iframe { 
    height: 40px; 
    min-height : 40px; 
} 

Oto jsfiddle przykład ładowanie jsfiddle plik /css/normalize.css ->http://jsfiddle.net/ovky3796/

Jak widać, ja również zmienia .popovermax-width w demo. Jest to tylko prezentacja, jeśli chcesz dostosować szerokość popover zgodnie z zawartością , wykonaj to samo, co powyżej z scrollWidth.