बूटस्ट्रैप पॉपओवर सामग्री में बाहरी HTML फ़ाइल

Question

जब मैं पॉपओवर सामग्री में बाहरी HTML फ़ाइल लोड करने के लिए iframe का उपयोग करता हूं, तो यह पॉपअप ऊंचाई पर सीमित है। लेकिन मैं पॉपअप ऊंचाई ऑटो होना चाहता हूँ। कोई मेरी मदद करता है।

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

जब आप पार domaining 'नहीं हैं, यानी आप google.com या समान iframe में लोड नहीं कर रहे हैं, यह अपेक्षाकृत आसान है।

नीचे समारोह है, जो पॉपओवर तत्व (.pop-right) और पैरामीटर के रूप में पॉपओवर सामग्री लेता घोषित:

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) iframe की scrollHeight (वास्तविक ऊंचाई प्राप्त)
2) मिलता है .popover-content<div>.pop-right
3) वास्तविक ऊंचाई पर .popover-content सेट करें, और स्क्रॉलबार से बचने के लिए के साथ ऐसा ही करें।

फिर, अपने पॉपओवर initialisation कॉल adjustPopover() iframes ऑनलोड घटना 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>';  
    } 
}); 

यह iframes के लिए एक न्यूनतम ऊंचाई निर्धारित करने के लिए एक अच्छा विचार है। यदि आप ऐसा नहीं करते हैं, तो क्रोम 150px में पॉपओवर में कम से कम ब्राउज़र आइफ्रेम की ब्राउज़र डिफ़ॉल्ट ऊंचाई होगी।

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

यहाँ एक jsfiddle उदाहरण jsfiddle फ़ाइल /css/normalize.css लोड हो रहा है ->http://jsfiddle.net/ovky3796/

जैसा कि आप देख, मैं भी परिवर्तन .popovermax-width डेमो में। यह केवल प्रदर्शन के लिए है, यदि आप की सामग्री के अनुसार पॉपओवर की चौड़ाई समायोजित करना चाहते हैं, तो इसके बजाय scrollWidth के साथ उपरोक्त जैसा ही करें।