출처 : http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html
iframeResizer.7z부모창
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="/script/jquery-1.11.3.min.js"></script>
<!-- 사용전 Jquery를 미리 선언해야 함 -->
<script type="text/javascript" src="../script/iframeResizer.min.js"></script>
</head>
<body>
<p id="callback"></p>
<p>start</p>
<iframe src="iframe.html" style="width: 950px; border: none;" frameBorder="0" scrolling="no"></iframe>
<p>end</p>
<!-- iframe 보다 아래 와야 한다. -->
<script type="text/javascript">
$('iframe').iFrameSizer({
// Disable if using size method with custom dimensions.
autoResize: true,
// Override the body background style in the iFrame.
bodyBackground: null,
// Override the default body margin style in the iFrame.
// A string can be any valid value for the CSS margin attribute,
// for example '8px 3em'. A number value is converted into px.
bodyMargin: null,
bodyMarginV1: 0,
bodyPadding: null,
// When set to true, only allow incoming messages from the domain
// listed in the src property of the iFrame tag. If your iFrame
// navigates between different domains, ports or protocols;
// then you will need to disable this option.
checkOrigin: true,
// If enabled, a window.parentIFrame object is created in the iFrame
// that contains methods outlined
enablePublicMethods: false,
// 'bodyOffset' | 'body<a href="http://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>' | 'documentElementOffset' | 'documentElementScroll' |
// 'max' | 'min' | 'grow' | 'lowestElement'
heightCalculationMethod: 'offset',
// The default value is equal to two frame refreshes at 60Hz
interval: 32,
// Setting the log option to true will make the scripts in both the host page
// and the iFrame output everything they do to the JavaScript console
// so you can see the communication between the two scripts.
log: false,
// Set maximum height/width of iFrame.
maxHeight: Infinity,
maxWidth: Infinity,
// Set minimum height/width of iFrame.
minHeight: 0,
minWidth: 0,
// Enable scroll bars in iFrame.
scrolling: false,
// Resize iFrame to content height.
sizeHeight: true,
// Resize iFrame to content width.
sizeWidth: false,
// Set the number of pixels the iFrame content size has to change by,
// before triggering resize of the iFrame.
tolerance: 0,
// Called when iFrame is closed via parentIFrame.close() method.
closedCallback: function () { },
// Initial setup callback function.
initCallback: function () { },
// Receive message posted from iFrame with the parentIFrame.sendMessage() method.
messageCallback: function () { },
// Function called after iFrame resized.
resizedCallback: function () { },
// Called before the page is repositioned after a request from the iFrame
callback: function (messageData) { // Callback fn when message is received
return true;
/* 혹시 필요할지 모르는 로그
$('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>
</body>
</html>
자식창
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- iframe 내 페이지도 Jquery가 필요하다 -->
<script type="text/javascript" src="/Script/lib/jquery-1.7.1.min.js"></script>
</head>
<body>
<div style="width: 950px; position: relative;">
iframe 페이지 본문 내용
</div>
<!-- iframe에서는 가장 마지막 부분에 호출한다 -->
<script type="text/javascript" src="../../Script/lib/iframeResizer.contentWindow.min.js"></script>
</body>
</html>
