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

iframeResizer.7z

부모창

<!DOCTYPE html>

<head>

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

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

</head>

<body>

<p>start</p>

<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">

<head>

<script type="text/javascript" src="/Script/lib/jquery-1.7.1.min.js"></script>

</head>

<body>

iframe 페이지 본문 내용

</div>

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

</body>

</html>

크로스 도메인에서도 iframe 높이를 자동으로 resize 해보자