출처 :
http://naradesign.net/wp/2007/12/12/129/
http://blog.naver.com/PostView.nhn?blogId=kyo1230&logNo=140168019949
방법1
iframe 의 사용이 권장되는 것은 아니지만 간혹 사용되는 경우 컨텐트의 높이에 따라 자동으로 resizing 되도록 하는 방법은 사용성을 높여줍니다. iframe 내부의 콘텐트 높이가 동적으로 달라지는 경우 고정된 높이로는 이것을 담아낼 수 없기에 스크롤이 나타나도록 처리하는 방법 대신 프레임 콘텐트의 내용이 스크롤 없이 모두 출력될 수 있도록 해 주는것이 좋겠지요.
문서의 <head> 영역에 포함되어야 할 스크립트.
<script type="text/javascript">
// iframe resize
function autoResize(i)
{
var iframeHeight=
(i).contentWindow.document.body.scrollHeight;
(i).height=iframeHeight+20;
}
</script>
문서의 <iframe> 코드에 포함되어야 할 스크립트.
<iframe src="#iframeUrl" onload="autoResize(this)" scrolling="no" frameborder="0"></iframe>
기타
- 같은 도메인 URL을 지닌 iframe 콘텐트에만 이 스크립트를 사용할 수 있습니다.
- IE6~7, FF2, Opera9, Safari2~3 크로스 브라우징을 확인 하였습니다.
참조
방법2
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != “function”){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
function resize(){
var height = document.body.scrollHeight;
parent.document.getElementById(“iframeID”).style.height = height + 50 + “px”;
}
addLoadEvent(resize);
var oldonload = window.onload;
if(typeof window.onload != “function”){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
function resize(){
var height = document.body.scrollHeight;
parent.document.getElementById(“iframeID”).style.height = height + 50 + “px”;
}
addLoadEvent(resize);
방법3.
<script language="JavaScript">
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('the_iframe').height=
the_height;
}
</script>
<iframe width="700" id="the_iframe" onLoad="calcHeight();" src="cms_m1.html" scrolling="NO" frameborder="0" height="1"></iframe>
방법4.
iframe auto resize (cross browsing)
아이프레임 자동 리사이즈 (크로스 브라우징)
test browser : ie6, ie7, firefox 3, safari 3, chrome, opera 9
parent :
...
<iframe id="contentFrame" name="contentFrame" src="about:blank" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
...
iframe :
...
<div id="content">
... contents ...
</div>
...
<script type="text/javascript">
function init(){
var doc = document.getElementById('content');
if(doc.offsetHeight == 0){
} else {
pageheight = doc.offsetHeight;
parent.document.getElementById("contentFrame").height = pageheight+"px";
}
}
window.onload = function(){
init();
}
</script>
...
iframe 안의 소스에서 내용이 들어가는 전체를 <div id="content"></div> 로 감싸고,
onload 이벤트로 그 div 의 dom.offsetHeight 를 구해서 parent.iframe 의 height 를 바꿔주는 방식이다.
붉은색으로 표시된 height 가 크로스 브라우징의 핵심이다.
겨우 height 가 핵심이냐고? 모르는 소리다.
clientHeight, scrollheight,innerHeight, 등등 모두 크로스브라우징은 안된다. 하지만 그냥 height 는 된다;;
해보면 알게 될것임!
[출처] iframe resize|작성자 산타랠리
-
1
여기여기
7
-
2
제작의뢰
1
-
3
ai ai개발
4
-
4
svauth
12
-
5
STT
8
-
6
인공지능
4
-
7
작성자자동변경
2
-
8
레퍼런스
6
-
9
딥러닝
8
-
10
개발자공모전
9
주간 인기 검색어 상세보기
2024년 11월 04일 ~ 11월 10일
이온디에서 실시간으로 많이 검색된 검색어 순위
