글
iframe자동 크기 조절
<html>
<head>
<script language="JavaScript">
<!--
var ifrContentsTimer;
function resizeRetry() { //이미지같이 로딩시간이 걸리는 것들이 로딩된후 다시 한번 리사이즈
if(document.body.readyState == "complete") {
clearInterval(ifrContentsTimer);
}else {
resizeFrame();
}
}
function resizeFrame(){ //페이지가 로딩되면 바로 리사이즈..
var h = parseInt(document.body.scrollHeight)+10;
if(h<600){h=600;}
self.resizeTo(document.body.scrollWidth + (document.body.offsetWidth-document.body.clientWidth), h);
}
//-->
</script>
</head>
<body onload="resizeFrame();ifrContentsTimer = setInterval("resizeRetry()",100);" style="margin-top:0;margin-left:0" bgcolor="#FFFFFF">
//iframe 크기 조정
if(document.attachEvent){
document.attachEvent("onreadystatechange",
function (){
var h = parseInt(document.body.scrollHeight)+10;
if(h<600) h=600;
self.resizeTo(document.body.scrollWidth + (document.body.offsetWidth-document.body.clientWidth), h);
}
);
}
[다른 도메인간 iframe 세로 자동스크롤 조정]
a.com
- auto.size.html
- testiframe.html
#################################################################
# auto.size #
# #
# iframe #
# ############### #
# #b.com/cp.html# #
# ############### #
# #
#################################################################
b.com
- cp.html
#################################################################
# function(){ #
# www.a.com/auto_size.html?height='+height; => 높이값 전달 #
# #
# iframe #
# ###################### #
# #a.com/auto_size.html# #
# ###################### #
# #
#################################################################
먼저 a라는 홈페이지에 auto_size.html을 만듭니다.
====================== auto_size.html - a.com =========================
<html>
<head>
<title>Resizing Page</title>
<script type="text/javascript">
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' ) {
//alert(height);
window.top.updateIFrame( height );
}
}
window.onload = onLoad;
</script>
</head>
<body>
<p>Resizing IFrame...</p>
</body>
</html>
=======================================================
그리고 a라는 홈페이지에서 링크할 문서에는 아래와 같이 삽입합니다.
======================= a.html - a.com ===================
<script type="text/javascript">
function updateIFrame( height ) {
alert(height);
var iframe = document.getElementById( 'myiframe' );
iframe.setAttribute( 'height', height );
}
</script>
<iframe name=myiframe src='http://**.***.com/' width='900' height='1000' scrolling='no' frameborder='0'></iframe>
이제 b라는 도메인의 b.html에는 아래와 같이 삽입합니다.
================== b.html - b.com============================
<style>
inneriframe { position :
</style>
<script type="text/javascript">
function rsize() {
var iframe = document.getElementById( 'inneriframe' );
var height_autosize = document.getElementById( 'height_autosize' );
var height = document.body.scrollHeight;
iframe.src = 'http://***.*****.com/html/auto_size.html?height='+height;
}
</script>
<BODY onload=rsize();>
<div id = height_autosize>
내용
</div>
<iframe id="inneriframe" width="600" height="50"></iframe>
</BODY>
--------------------------------------------------------------------------------------
동일 도메인
--------------------컨텐츠 사이트에----------------------------
<body onload="resizeFrame(); ifrContentsTimer = setInterval('resizeRetry()',100);">
<script>
var ifrContentsTimer;
//이미지같이 로딩시간이 걸리는 것들이 로딩된후 다시 한번 리사이즈
function resizeRetry()
{
if(document.body.readyState == "complete") {
clearInterval(ifrContentsTimer);
}
else {
resizeFrame();
}
}
//페이지가 로딩되면 바로 리사이즈..
function resizeFrame()
{
self.resizeTo(
//document.body.scrollWidth + (document.body.offsetWidth-document.body.clientWidth),
document.body.scrollWidth,
parseInt(document.body.scrollHeight)+10);
}
'렛츠웹 + 게임 > My Tip' 카테고리의 다른 글
| 정규표현식(php) (0) | 2009.01.05 |
|---|---|
| 암,복호화 함수 (0) | 2009.01.05 |
| 엑셀저장처리 (0) | 2009.01.05 |
| 표준웹코딩 예제 (0) | 2007.10.09 |
| 표준웹코딩의 장점 Table for layout과 CSS layout의 비교실험 (0) | 2007.06.09 |
