테두리가 없는 iframe은 웹페이지와 원활하게 통합될 수 있기 때문에 페이지를 새로 고치지 않고도 페이지의 일부 데이터를 업데이트할 수 있습니다. 그러나 iframe의 크기는 레이어만큼 '확장 가능'하지 않으므로 문제가 발생합니다. 문제는 iframe의 높이를 너무 많이 설정하면 좋지 않고, 적게 설정하면 더 나쁘다는 것입니다. 이제 iframe의 높이를 동적으로 조정하는 방법을 알려드리겠습니다. 주로 다음 JS 함수를 사용합니다.
프로그램 코드
함수 SetWinHeight(obj)
{
var win=obj;
if(document.getElementById)
{
if (win && !window.opera)
{
if(win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if(win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}
마지막으로 iframe을 추가할 때 onload 속성이 손실될 수 없습니다. 물론 id도 함수의 win과 일치해야 합니다.
프로그램 코드
2. 포함된 각 파일을 웹사이트에 추가하세요.
<스크립트 언어 = "JavaScript" src = "bottom.js"/>
3. 좋아요, 이제 그만하세요!
WINXP 및 IE6에서 테스트를 통과했습니다. 매우 간단합니다!
iframe의 적응형 높이 구현
페이지 길이에 자동으로 적응할 수 있는 iframe의 적응형 높이를 실현하여 페이지와 iframe에 스크롤 막대가 동시에 나타나는 현상을 방지합니다.
프로그램 코드
<스크립트 유형="텍스트/자바스크립트">
//** iframe이 페이지에 자동으로 적응합니다**//
//페이지 높이에 따라 높이를 자동으로 조정하려는 iframe 이름 목록을 입력합니다.
//각 iframe의 ID를 쉼표로 구분합니다. 예: ["myframe1", "myframe2"] 양식은 하나만 있을 수 있으므로 쉼표가 필요하지 않습니다.
//iframe의 ID를 정의합니다.
var iframeids=["테스트"]
//사용자의 브라우저가 iframe을 지원하지 않는 경우 iframe을 숨길 것인지 여부는 yes는 숨김을 의미하고 no는 숨김을 의미하지 않습니다.
var iframehide="예"
함수 dyniframesize()
{
var dyniframe=새 배열()
(i=0; i { if(document.getElementById) { //iframe 높이 자동 조정 dyniframe[dyniframe.length] = document.getElementById(iframeids); if(dyniframe && !window.opera) { dyniframe.style.display="차단" if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //사용자의 브라우저가 NetScape인 경우 else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //사용자의 브라우저가 IE인 경우 dyniframe.height = dyniframe.Document.body.scrollHeight; } } //설정된 매개변수에 따라 iframe을 지원하지 않는 브라우저의 표시 문제를 처리합니다. if ((document.all || document.getElementById) && iframehide=="no") { var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids) tempobj.style.display="차단" } } } if(window.addEventListener) window.addEventListener("load", dyniframesize, false) 그렇지 않은 경우(window.attachEvent) window.attachEvent("onload", dyniframesize) 또 다른 window.onload=dyniframesize 트랙백: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1608312
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;