iframe을 높이에 맞게 조정하는 방법에 대한 설명-HTML 튜토리얼-php.cn

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

小云云

풀어 주다： 2017-11-17 09:50:33

원래의

2140명이 탐색했습니다.

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(&#39;pTar=&#39;+down+&#39;;&#39;);
}
pTar.style.display="block";
if (Sys.ie){
if(Sys.ie==&#39;9.0&#39;){
pTar.height=pTar.contentWindow.document.body.offsetHeight+15+"px";
pTar.width=pTar.contentWindow.document.body.scrollWidth+"px";
}else if(Sys.ie==&#39;8.0&#39;){
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 태그에 대한 더 깊은 이해를 얻을 수 있기를 바랍니다.