jQuery Plugin For Auto Resizing iFrame - iFrame Resizer 아이프레임 리사이즈

아이프레임으로 컨텐츠를 관리할때 아이프레임 사이즈가 수시로 변하기때문에 resize를 해주어야 하는대 구글링을 통해서 쓸만한 jQuery Plugin 을 찾았다.

 

부모창에는

 

<iframe src="frame.content.html" width="100%" scrolling="no"></iframe>

<script type="text/javascript" src="../js/jquery.iframeResizer.min.js"></script> 
<script type="text/javascript">

$('iframe').iFrameSizer({
    log                    : true,  // For development
    autoResize             : true,  // Trigering resize on events in iFrame
    contentWindowBodyMargin: 8,     // Set the default browser body margin style (in px)
    doHeight               : true,  // Calculates dynamic height
    doWidth                : false, // Calculates dynamic width
    enablePublicMethods    : true,  // Enable methods within iframe hosted page
    interval               : 0,     // interval in ms to recalculate body height, 0 to disable refreshing
    scrolling              : false, // Enable the scrollbars in the iFrame
    callback               : function(messageData){ // Callback fn when message is received
     $('p#callback').html(
      '<b>Frame ID:</b> '    + messageData.iframe.id +
      ' <b>Height:</b> '     + messageData.height +
      ' <b>Width:</b> '      + messageData.width +
      ' <b>Event type:</b> ' + messageData.type
     );
    }
});

</script>

 

아이프레임에 들어가는 페이지에는 하단부분에

<script type="text/javascript" src="../js/iframeResizer.contentWindow.min.js"></script>

을 넣어준다.

 

 

jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.zip

 

출처 : http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html