iframe_Experience 교환의 적응형 높이에 대한 다양한 방법 요약-CSS 튜토리얼-php.cn

iframe_Experience 교환의 적응형 높이에 대한 다양한 방법 요약

WBOY

풀어 주다： 2016-05-16 12:04:39

원래의

2220명이 탐색했습니다.

테두리가 없는 iframe은 웹페이지와 원활하게 통합될 수 있기 때문에 페이지를 새로 고치지 않고도 페이지의 일부 데이터를 업데이트할 수 있습니다. 그러나 iframe의 크기는 레이어만큼 '확장 가능'하지 않으므로 문제가 발생합니다. 문제는 iframe의 높이를 설정할 때 너무 많으면 좋지 않고, 더 작으면 더 나쁘다는 것입니다. 이제 iframe의 높이를 동적으로 조정하는 방법을 알려드리겠습니다. 주로 다음 JS 기능을 사용하세요.
먼저 이 방법은 코드가 간단하고 호환성이 괜찮은지 먼저 테스트해볼 수 있습니다.

코드 복사 코드는 다음과 같습니다.

 
function 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 속성도 손실될 수 없습니다. function

코드 복사 코드는 다음과 같습니다.

&lt ;/iframe> <br><br> </div>이런 종류의 코드는 위 솔루션과 유사합니다. <br><br>클래식 코드 iFrame 적응형 높이가 IE6/IE7/IE8/Firefox/Opera/에서 테스트를 통과했습니다. 크롬/사파리. <strong> </strong>HTML 코드: <br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="29880" class="copybut" id="copybut29880" onclick="doCopy('code29880')">코드 복사 <u></u></a> 코드는 다음과 같습니다. </span></div> <div class="codebody" id="code29880"> <iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 스크롤링=no width="100%" onLoad="iFrameHeight()" >< /iframe> 자바스크립트 코드: <br><script type="text/javascript" 언어="javascript"> <br>function iFrameHeight() { <br>var ifm= document.getElementById("iframepage") <br>var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; <br>if(ifm != null && subWeb != null) { <br>ifm.height = subWeb.body .scrollHeight; <br>} <br>} <br></script> <br><br>
</div>
<br><br>다음이 더 호환됩니다 <strong></strong><br><div class="codetitle"> <span><a style="CURSOR: pointer" data="69401" class="copybut" id="copybut69401" onclick="doCopy('code69401')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span>
</div> <div class="codebody" id="code69401"><script 언어="javascript" type="text/javascript"&gt ; <BR>function dyniframesize(down) { <BR>var pTar = null; <BR>if (document.getElementById){ <BR>pTar = document.getElementById(down) <BR>else; 🎜>eval(' ​​pTar = ' + down + ';'); <BR>} <BR>if (pTar && !window.opera){ <BR>//iframe 크기 조정 시작 <BR>pTar.style.display= "block" <BR>if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){ <BR>//ns6 구문 <BR>pTar.height = pTar.contentDocument.body.offsetHeight <BR>pTar. width = pTar.contentDocument .body.scrollWidth+20; <BR>} <BR>else if (pTar.Document && pTar.Document.body.scrollHeight){ <BR>//ie5+ 구문 <BR>pTar.height = pTar .Document.body.scrollHeight; <BR>pTar.width = pTar.Document.body.scrollWidth; <BR>} <BR>} <BR>} <BR><iframe src = "/default2.aspx "frameborder="0" marginheight="0" marginwidth="0"frameborder="0" scrolling="auto" id="ifm" name="ifm" onload="javascript:dyniframesize('ifm ');" width ="100%"> <br> 

다른 상황을 위한 iframe 솔루션(매우 간단함)

중요 팁 : src=에 입력해야 하는 웹 주소는 이 페이지와 동일한 사이트에 있어야 합니다. 그렇지 않으면 "액세스가 거부되었습니다!"라는 오류가 발생합니다. (실제로는 접근거부로 이어지는 Js의 크로스도메인 문제 때문입니다.)
예전에 이런 문제를 겪은 적이 있어서 답변을 얻기 위해 온라인으로 검색해 봤는데 역시 이런 문제를 겪은 분들이 많더라구요. 이제 솔루션을 공유합니다1.bottom.js 파일을 생성한 후 다음 코드를 입력합니다(단 두 줄만)

코드 복사

코드는 다음과 같습니다. parent.document.all("프레임 ID 이름").style.height=document.body.scrollHeight parent; .document.all(" 프레임 ID 이름").style.width=document.body.scrollWidth

여기서 프레임 ID 이름은 Iframe의 ID입니다. 예:

코드 복사 코드는 다음과 같습니다.

2. 웹사이트에 포함된 각 파일에

코드를 복사합니다.

 
3. 하루야! 
 WINXP 및 IE6에서 테스트를 통과했습니다. 매우 간단합니다! 

iframe의 적응형 높이 구현
페이지와 iframe에 스크롤 막대가 동시에 나타나는 현상을 방지하기 위해 페이지 길이에 자동으로 적응할 수 있는 iframe의 적응형 높이를 구현합니다.

코드 복사 코드는 다음과 같습니다.

세 번째 방법은 일괄 iframe 조정입니다.

직장에서 iframe을 만날 때마다 콘텐츠 적응형 높이 문제에 관해서는 이전에 인터넷에서 비슷한 문제에 대한 해결책을 본 적이 있어서 브라우저와 호환되는 비교적 완전한 해결책을 검색하고 찾았으므로 직접 작성할 필요가 없습니다.
직접 작성할 필요는 없지만 개념은 여전히 이해해야 합니다. 기본적으로 iframe 속성 src로 지정된 문서 내 콘텐츠의 높이를 얻은 다음 이를 사용하여 iframe 자체의 높이입니다. iframe이 있는 페이지가 로드되면 페이지의 높이가 변경됩니다. 적응형 높이가 필요한 모든 iframe이 자동으로 설정되므로 페이지의 모든 iframe이 확인되면 시간과 노력이 절약됩니다. 적응형 높이가 필요하면 iframe 배열을 직접 가져와 코드에 제공하면 ID를 직접 작성할 필요도 없으며 프로그램이 완료됩니다. (코드는 붙여넣어져있습니다:)

코드를 복사하세요

코드는 다음과 같습니다

 
Jemand im Internet hat die Methode verbessert und das Problem der automatischen Anpassung der Höhe des Iframes gelöst Der Inhalt des im Iframe enthaltenen Dokuments ändert sich dynamisch. Das Prinzip besteht darin, die Inhaltshöhe des im Iframe enthaltenen Dokuments auf der Seite, auf der sich der Iframe befindet, kontinuierlich zu scannen und die Höhe des Iframes selbst zu ändern Problem, aber es ist schwer zu sagen, ob es Auswirkungen auf die Seitengeschwindigkeit und die Systemressourcennutzung haben wird. Ich denke, dass die Methode etwas paranoid ist. Es sollte eine bessere Lösung geben. 

Die vierte Methode, bei der nur die ID des bekannten Iframes aufgerufen wird, wird nicht empfohlen

Code kopieren

Der Code lautet wie folgt:

function iframeAutoFit(iframeObj){ setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document. body.scrollHeight :iframeObj.contentDocument.body.offsetHeight);},200) }Wie verwende ich es? Fügen Sie dem Iframe eine ID hinzu, die angepasst werden muss, und führen Sie es dann aus js.