Externe HTML-Datei im Bootstrap-Popover-Inhalt

Question

Wenn ich Iframe zum Laden externer HTML-Datei in Popover-Inhalt verwenden, ist es auf Popup-Höhe beschränken. Aber ich möchte Popup-Höhe automatisch sein. Jemand hilft mir aus.!

$(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

Wenn Sie keine Kreuz domaining‘sind, das heißt Sie sind nicht google.com oder ähnliches in die iframe Laden, ist es relativ einfach.

Deklarieren die unten-Funktion, die das popover Element (.pop-right) und der popover Inhalt als Parameter nimmt:

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) erhalten scrollHeight des iframe (die wirkliche Höhe)
2) erhalten, die .popover-content<div> verbunden mit .pop-right
3) .popover-content auf die tatsächliche Höhe einstellen, und das gleiche mit der , um Bildlaufleisten zu vermeiden.

Dann in Ihrem popover Initialisierungsaufrufes adjustPopover() in den iframes onload-Ereignis mit 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>';  
    } 
}); 

Es ist eine gute Idee, eine Mindesthöhe für die iframes einzustellen. Wenn Sie das nicht tun, wird Popover immer mindestens die Standardhöhe eines Iframes haben, in Chrome 150px.

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

Hier ist ein jsfiddle Beispiel die jsfiddle Datei /css/normalize.css Laden ->http://jsfiddle.net/ovky3796/

Wie Sie sehen, ich ändert sich auch .popovermax-width in der Demo. Dies ist nur zur Veranschaulichung, wenn Sie die Breite des Popover entsprechend dem Inhalt der anpassen möchten, tun Sie dasselbe wie oben mit scrollWidth statt.