테두리가 없는 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과 일치해야 합니다.
프로그램 코드
<iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)"frameborder="0" scrolling="no"></ 아이프레임>
다른 상황에 대한 iframe 솔루션(매우 간단함)
중요사항: src=에 입력해야 하는 웹페이지 주소는 이 페이지와 동일한 사이트에 있어야 합니다. 그렇지 않으면 "접속이 거부되었습니다!"라는 오류가 발생합니다. (실제로 이는 크로스 도메인 문제 때문입니다.) 액세스 거부로 이어지는 Js입니다.
이전에 이 문제가 발생하여 답변을 얻기 위해 온라인으로 검색한 결과 많은 사람들이 이 문제에 직면했다는 사실을 발견했습니다. 이제 해결 방법을 공유하겠습니다.
1. Bottom.js 파일을 생성하고 다음 코드를 입력합니다(2줄만)
parent.document.all("프레임 ID 이름").style.height=document.body.scrollHeight;
parent.document.all("프레임 ID 이름").style.width=document.body.scrollWidth;
여기서 프레임 ID 이름은 Iframe의 ID입니다. 예를 들면 다음과 같습니다.
<IFRAME id="프레임 ID 이름" name="left" 프레임Border=0 스크롤링=no src="XXX.asp" width="100%"></IFRAME>
2. 포함된 각 파일을 웹사이트에 추가하세요.
<스크립트 언어 = "JavaScript" src = "bottom.js"/></script>
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<iframeids.length; 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인 경우
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
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
</script>
트랙백: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1608312