Bootstrap Popover içeriğinde harici HTML dosyası

Question

Iframe, harici html dosyasını popover içeriğine yüklemek için kullandığımda, pop-up yüksekliğini sınırlıyor. Ama otomatik olmanın pop-up yüksekliğini istiyorum. Birisi bana yardım etsin! Eğer 'çapraz-domaining olmadığında

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

, yani, iç çerçevenin içine google.com veya benzeri yükleme olmadan, nispeten kolaydır.

popover elemanı ( .pop-right) ve parametre olarak popover içeriği alır aşağıdaki fonksiyon, bildirmek:

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) iç çerçevenin scrollHeight (gerçek yüksekliği olsun)
2) almak .pop-right ile ilgili .popover-content<div>
3) gerçek yüksekliğe .popover-content ayarlayın ve kaydırma çubuklarını önlemek için ile aynı işlemi yapın.

Sonra onload="adjustPopover(".pop-right", this);" ile olay onLoad iframe'lerinde sizin popover başlatma çağrısı adjustPopover() yılında:

$('.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>';  
    } 
}); 

iframe'lerde için minimum yükseklik ayarlamak için iyi bir fikirdir. Bunu yapmazsanız, popover'lar her zaman en azından 150px değerinde bir iframe'in varsayılan varsayılan tarayıcısına sahip olacaktır.

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

İşte jsfiddle dosya /css/normalize.css yüklenirken bir jsfiddle örnektir ->http://jsfiddle.net/ovky3796/

Gördüğünüz gibi, ben de demo .popovermax-width değiştirir. Bu, yalnızca popülasyonun genişliğini 'un içeriğine göre ayarlamak istiyorsanız, bunun yerine yalnızca ile aynı işlemi yapın.