반응형
타 도메인간에 iframe resize 가 몇년전까지는 어설프나마 잘 됐었는데
요즘은 브라우져도 많아지고 explorer 버젼도 많아져서 먹통이 되어버려서 업체에서 문의가 왔다
골치 아프겠단 생각을 가지고 열심히 검색을 했는데 좋은놈 발견!!
같은 도메인은 물론이고 타 도메인도 매우 잘됌ㅎㅎ
테스트는 explorer 10/11하고 크롬해서 해봤는데 OK
(sample : http://f.goodkiss.co.kr/sample/frameResize/index.html)
* 부모창(index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iFrame message passing test</title>
<meta name="description" content="iFrame message passing test">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<h2>Automagically resizing iFrame</h2>
<p>Resize window or click 'Toggle content' to watch iFrame resize</p>
<div style="margin:20px;">
<iframe src="frame.content.html" width="100%" scrolling="no"></iframe>
</div>
<p id="callback">
</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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>
</body>
</html>
와 같이 코딩해 주면 되고
* 자식창(frame.content.html)
페이지에서 jQuery를 안쓴다면 아래와 같이 선언해주고 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 페이지 하단에 아래의 코딩을 해주면 된다.
주의할 점은 자식페이지에 css가 지저분하거나 복잡하면 resizing
가 잘 안되는 경우가 발생할 수 있으니
잘 되지 않을 경우에는 css를 체크해보길 바람!!
출처 : http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html
첨부파일 :
jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.zip
반응형