Notice
Recent Posts
Recent Comments
Link
Tags more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Archives
Today
Total


관리 메뉴

오리, 하늘 날다

페이지 동기형 iframe 높이 조절 본문

웹디자인

페이지 동기형 iframe 높이 조절

i0121 2016. 10. 7. 15:17

페이지 내에서 iframe 높이가 자동으로 조절 되는 소스.

스크롤바가 2개씩 생기는 부분을 방지하기도 하고

내용이 많을 때 일괄적으로 표시 해 주는 유용한 소스.

(iframe 사용은 지양)

<head> 안에

<script type="text/javascript">

// iframe resize

function autoResize(i)

{

    var iframeHeight=

    (i).contentWindow.document.body.scrollHeight;

    (i).height=iframeHeight+20;

}

</script>

 

<body> 문서의 <iframe> 스크립트


<iframe src="#iframeUrl" onload="autoResize(this)" scrolling="no" frameborder="0"></iframe>


유의, 소속 도메인 URL 내에서만 스크립트가 작동됩니다.

 

 

참조

http://guymal.com/mycode/iframe_size/

 

 

The Code

In the head of your document enter the following JavaScript code:

<script language="JavaScript">
<!--
function calcHeight()
{
  //find the height of the internal page
  var the_height=
    document.getElementById('the_iframe').contentWindow.
      document.body.scrollHeight;

  //change the height of the iframe
  document.getElementById('the_iframe').height=
      the_height;
}
//-->
</script>

and in the body create the iframe tag:

<iframe width="700" id="the_iframe" 
	onLoad="calcHeight();" 
	src="testing_page.shtml" 
	scrolling="NO" 
	frameborder="1" 
	height="1">
An iframe capable browser is 
required to view this web site.
</iframe>
저작자표시 비영리 동일조건
공유하기 링크
'웹디자인' Related Articles more
Comments