iframe을 높이에 맞게 조정하는 방법에 대한 설명

iframe 적응형 높이를 사용해야 하는 이유는 무엇인가요? 사실, 그것은 단지 아름다움을 위한 것입니다. 그렇지 않으면 iframe과 창의 길이와 크기가 달라서 항상 불편해 보일 것입니다. 특히 프로그래머인 우리에게는 목에 덩어리처럼 느껴질 것입니다. . iframe을 통해 다른 페이지가 페이지에 삽입된 후 페이지의 이 영역이 위, 아래, 왼쪽 및 오른쪽 스크롤 막대 없이 어떻게 자동으로 iframe 높이에 맞춰 조정될 수 있습니까? 다음 방법은 JavaScript를 사용하여 적응력이 뛰어난 iframe을 구현하는 것입니다. 이는 모든 브라우저와 호환됩니다. IE, Firefox, Chrome, Opera 및 Safari는 모두 적응력이 뛰어난 iframe을 구현합니다.

function dyniframesize(down){
var Sys={};
var ua=navigator.userAgent.toLowerCase();
var s;
(s=ua.match(/msie ([\d.]+)/))?Sys.ie=s[1]:
(s=ua.match(/firefox\/([\d.]+)/))?Sys.firefox=s[1]:
(s=ua.match(/chrome\/([\d.]+)/))?Sys.chrome=s[1]:
(s=ua.match(/opera.([\d.]+)/))?Sys.opera=s[1]:
(s=ua.match(/version\/([\d.]+).*safari/))?Sys.safari=s[1]:0;
var pTar=null;
if (document.getElementById){
pTar=document.getElementById(down);
}else{
eval('pTar='+down+';');
}
pTar.style.display="block";
if (Sys.ie){
if(Sys.ie=='9.0'){
pTar.height=pTar.contentWindow.document.body.offsetHeight+15+"px";
pTar.width=pTar.contentWindow.document.body.scrollWidth+"px";
}else if(Sys.ie=='8.0'){
pTar.height=pTar.Document.body.offsetHeight+15+"px";
pTar.width=pTar.Document.body.scrollWidth+"px";
}else{
pTar.height=pTar.Document.body.scrollHeight+25+"px";
pTar.width=pTar.Document.body.scrollWidth+"px";
}
}
if (Sys.firefox){
pTar.height=pTar.contentDocument.body.offsetHeight+15+"px";
pTar.width=pTar.contentDocument.body.scrollWidth+"px";
}
if (Sys.chrome){
pTar.height=pTar.contentDocument.body.offsetHeight;
pTar.width=pTar.contentDocument.body.scrollWidth;
}
if (Sys.opera){
pTar.height=pTar.contentDocument.body.offsetHeight;
pTar.width=pTar.contentDocument.body.scrollWidth;
}
if (Sys.safari){        
if(pTar.contentDocument.body.offsetHeight <= &#39;186&#39;){
pTar.height=pTar.contentDocument.body.offsetHeight+10;
}else{
pTar.height=pTar.contentDocument.body.offsetHeight;
}
pTar.width=pTar.contentDocument.body.scrollWidth;
}
}

구체적인 사용 방법은 다음과 같습니다(iframe의 콘텐츠 높이에 맞게 id=phpernote로 iframe의 높이를 설정).

<iframe marginwidth="0" framespacing="0" marginheight="0" frameborder="0" border="0" width="620px"
 style="border:0px;background:#FFF;max-height:245px;
" scrolling="no" src="http://www.phpernote.com/comm/page/218167" id="phpernote" onload="javascript:dyniframesize(&#39;phpernote&#39;);">
</iframe>

지난 글에서 소개한 iframe 속성 사용 방법, 이 문서에서는 iframe 상위 수준 솔루션을 적용하는 방법도 설명합니다. 이 두 문서를 통해 iframe 태그에 대한 더 깊은 이해를 얻을 수 있기를 바랍니다.

관련 권장 사항:

iframe 속성 사용 방법

php

php 양식 파일 iframe 비동기 업로드 튜토리얼 설명

iframe 태그 공유에 주의 이슈

html iframe 사용에 대한 실제 요약 공유

위 내용은 iframe을 높이에 맞게 조정하는 방법에 대한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!