네이버에서는 검색이 어려운 블로그입니다. 구글검색을 이용해 주세요.
프레임이 바뀔 때마다 자동으로 프레임의 사이즈에 맞게 크기를 조정한다.
위의 소스는 모든 플랫폼에서 잘 작동할것 같은 예감이 든다.
http://stackoverflow.com/questions/14713339/why-is-postmessage-script-not-working-in-ie8
아래 소스는 프레임을 불러왔을 때 자동으로 높이를 조정한다.
iframe cross domain 도 가능하다. 결론은 상호조약이 있어야 한다.
부모페이지에는 자식페이지 주소가 있어야 하고 자식페이지에는 부모페이지 주소가 있어야 한다.
여기 CCM음반 카테고리는 다 아래의 소스로 되어 있으며 IE8, Chrome 에서 잘 작동한다. (iframe cross domain)
IE7 이하는 postMessage 이벤트를 지원하지 않아서 안된다.
======================================================================
<script type="text/javascript">
if (window.addEventListener) {
window.addEventListener('message', letsgo, false);
} else if (window.attachEvent) {
window.attachEvent('onmessage', letsgo);
}
function letsgo(event) {
var iframe = document.getElementById('ifr');
if (event.origin !== 'http://exm.com') return; // iframe src 도메인. 없어도 가능
if (isNaN(event.data)) return; // only accept something which can be parsed as a number. 없어도 가능
var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar
iframe.height = height + "px";
}
</script>
<iframe src="http://exm.com/1.html" frameborder="0" scrolling="no" style="width: 100%;" id="ifr"></iframe>
=========================================================================
같은 도메인이면 postMessage 없이 아래로 가능하지만 다른 도메인이면 안된다.
<script language="javascript">
function ResizeHeight(FrameID)
{
var this_height= document.getElementById(FrameID).contentWindow.document.body.scrollHeight;
document.getElementById(FrameID).height=this_height;
}
</script>
<iframe id="iFrame" src="1.html" width="100%" onLoad="ResizeHeight('iFrame')"></iframe>
JQuery ( IE8 에서는 안된다 ㅠ )
$(function() {
$('#iFrame').load(function() {
$(this).css('height', $(this).contents().find('body').height()+'px');
});
});
'Web Source' 카테고리의 다른 글
| Get Cross Domain iFrame Content (0) | 2014.09.25 |
|---|---|
| PHP - Browser detection - IE, Firefox, Safari, Chrome (0) | 2014.09.22 |
| Div Zoom iFrame (0) | 2014.09.03 |
| javascript yesterday (0) | 2014.09.03 |
| javascript exist document.getElementById (0) | 2014.09.03 |
