부트 스트랩 Popover 콘텐츠의 외부 HTML 파일

Question

iframe을 사용하여 팝업 콘텐츠에 외부 HTML 파일을로드하면 팝업 높이가 제한됩니다. 하지만 나는 팝업 높이를 자동으로하고 싶다. 어떤 사람이 나를 도와줍니다.

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

'도메인 간 연결을 사용하지 않는 경우', 즉 iframe에 google.com 또는 유사 콘텐츠를로드하지 않는 경우 비교적 쉽습니다.

가 팝 오버 소자 ( .pop-right) 및 파라미터와 팝 오버 콘텐츠 <iframe> 걸리는 아래 함수 선언

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을 실제 높이로 설정하고 스크롤 막대를 피하려면 과 동일하게 설정하십시오.

그런 다음, onload="adjustPopover(".pop-right", this);"와 이벤트 온로드 iframe을에서 팝 오버 초기화 호출 adjustPopover()에 :

$('.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을위한 최소 높이를 설정하는 것이 좋습니다. 그렇게하지 않으면 popovers는 항상 브라우저에서 적어도 iframe의 기본 높이 인 Chrome 150px를가집니다.

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

가 여기에 jsfiddle 파일 /css/normalize.css를로드하는 jsfiddle 예이다 ->http://jsfiddle.net/ovky3796/

보시다시피, 나는 또한 데모 .popovermax-width을 변경합니다. 이것은 데모 용 일 뿐이므로 의 내용에 따라 팝업 폭을 조정하려면 scrollWidth 대신 위와 동일하게 수행하십시오.