File HTML esterno in Bootstrap Contenuto popover

Question

Quando uso iframe per caricare file html esterno nel contenuto popover, limita l'altezza del popup. Ma voglio che l'altezza del popup sia automatica. Qualcuno mi aiuta.!

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

Quando non si è incrociata domaining', vale a dire che si sta caricando non google.com o simili nel iframe, è relativamente facile.

dichiarare la funzione di seguito, che prende l'elemento popover (.pop-right) e il contenuto popover come parametri:

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) ottenere scrollHeight dell'iframe (l'altezza reale)
2) ottenere la .popover-content<div> associato a .pop-right
3) impostare .popover-content all'altezza reale e fare lo stesso con per evitare le barre di scorrimento.

Poi, nel vostro popover inizializzazione chiamata adjustPopover() negli iframe OnLoad-evento con 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>';  
    } 
}); 

E 'una buona idea per impostare un'altezza minima per i iframe. Se non lo fai, i popover avranno sempre almeno l'altezza predefinita dei browser di un iframe, in chrome 150px.

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

Ecco un esempio jsfiddle il caricamento del file di jsfiddle /css/normalize.css ->http://jsfiddle.net/ovky3796/

Come vedete, ho modifiche anche .popovermax-width nella demo. Questo è solo a scopo dimostrativo, se si desidera regolare la larghezza del popover in base al contenuto dello , fare invece come sopra con scrollWidth.