2015. 5. 8. 15:06 IT/html_css
다른 도메인 ifame 리사이징.
iframe을 적용할 사이트는 a사이트
참고할 사이트는 b사이트
아래는 참고할 b사이트 소스
<html>
<head>
<script type="text/javascript">
<!--
function rsize() {
var iframe = document.getElementById( 'inneriframe' );
var wrapper = document.getElementById( 'wrapper' );
if(wrapper.offsetHeight == 0){
} else {
pageheight = wrapper.offsetHeight;
var height = pageheight+"px";
}
iframe.src = 'http://적용할a사이트주소/autosize.htm?height='+height;
}
//-->
</script>
</head>
<body onload=rsize();>
<div id="wrapper">
내용...
</div>
<iframe id="inneriframe" width="10" height="10" style="display:none"></iframe>
</body>
</html>
or
<html>
<head>
<script type="text/javascript">
<!--
$(document).ready(function(){
var iframe = document.getElementById( 'inneriframe' );
var wrapper = document.getElementById( 'ifmwrapper' );
if(wrapper.offsetHeight == 0){
} else {
pageheight = wrapper.offsetHeight;
var height = pageheight;
}
iframe.src = 'http://적용할a사이트주소/autosize.htm?height='+height;
});
//-->
</script>
</head>
<body onload=rsize();>
<div id="wrapper">
내용...
</div>
<iframe id="inneriframe" width="10" height="10" style="display:none"></iframe>
</body>
</html>
iframe을 적용하는 a사이트에 autosize.htm문서를 작성한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script>
function goPage(value) {
window.open(value,'_self','');
}
function onLoad() {
var params = window.location.search.substring( 1 ).split( '&' );
var height;
for( var i = 0, l = params.length; i < l; ++i ) {
var parts = params[i].split( '=' );
switch( parts[0] ) {
case 'height':
height = parseInt( parts[1] );
break;
}
}
if( typeof( height ) == 'number' ) {
window.top.updateIFrame( height );
}
}
window.onload = onLoad;
</script>
</head>
<body>
</body>
</html>
Or PHP일 경우
<html>
<head>
<script src="/cms/js/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
top.resizeIframe(<?=$_GET["height"]?>); // B 에서 숨겨진 아이프레임으로 A1 이 호출되지만, A 가 top 이 되는 것.
});
</script>
</head>
<body>
</body>
</html>
iframe이 들어갈 a사이트 페이지에 아래 소스를 적용시킨다
<script type="text/javascript">
function updateIFrame( height ) {
var iframe = document.getElementById( 'myiframe' );
iframe.setAttribute( 'height', height );
//alert(height);
}
</script>
<iframe id="myiframe" src="http://아래는 참고할 b사이트 페이지" scrolling=no frameborder=0 width="320" height="600"></iframe>
'IT > html_css' 카테고리의 다른 글
| iframe 문제점. (0) | 2015.05.21 |
|---|---|
| placeholder 줄바꿈. (0) | 2015.05.21 |
| iframe resize, resizing, 리사이징. (0) | 2015.04.27 |
| HTML5 / CSS3 placeholder 폰트 색상 지정 (0) | 2015.03.17 |
| div 스크롤. div scroll. (0) | 2014.12.31 |
