차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판이전 판
다음 판
이전 판
tech:iframe [2014/03/31 04:39] 115.93.88.196tech:iframe [2016/07/12 09:26] (현재) – 바깥 편집 127.0.0.1
줄 1: 줄 1:
 +{{tag>tech iframe}}
 +======Iframe======
 +
 +
 +[[http://development.tistory.com/entry/iframe%EC%9D%98-height-%EB%A5%BC-%EB%82%B4%EB%B6%80-%EB%AC%B8%EC%84%9C%EC%9D%98-%ED%81%AC%EA%B8%B0%EC%97%90-%EB%94%B0%EB%9D%BC-%EC%9E%90%EB%8F%99-%EC%A1%B0%EC%A0%95|아이프레임 세로 사이즈 자동조절 소스]]
 +
 +아이프레임으로 작업을 하다보면 세로사이즈가 고정된 페이지인 경우에는 문제가 안되지만 세로사이즈가 유동적일때는 참 곤란 합니다. 이럴때 아이프레임의 세로사이즈를 100%로 만드는 방법입니다. 
 +
 +
 +
 +
 +
 +===iframe 이 들어갈 페이지에 아래 스크립트 삽입 ===
 +
 +ie 만 되는 듯...
 +
 +<code javascript>
 +<script> 
 +function doResize() 
 +
 +container.height = myframe.document.body.scrollHeight; 
 +container.width = myframe.document.body.scrollWidth; 
 +
 +</script> 
 +</code>
 +
 +
 +=== iframe 구문에 onload="doResize()" 삽입 ===
 +
 + 
 +
 +사용하는 페이지와 불러올 아이프레임이..같은 서버에 있어야만 실행..다른 서버에 있는 페이지 불러오면..아마 권한이 없어서 에러날듯..~
 +
 +<code html>
 +<iframe src="프레임에 들어갈 문서" scrolling=no name="myframe" width="100%" height="100%" 
 +marginwidth="0" marginheight="0" frameborder="no" onload="doResize()"></iframe>
 +
 +</code>
 +
 +아이프레임의 크기를.. 자동으로 바꿔주는 스크립트입니다.
 +간단하면서도.. 꽤 유용할꺼 같아서 올립니다. ^^
 +iframe에 들어갈 파일의 로딩이 완료되는 순간 doResize() 함수를 호출하여 iframe을 포함하는 TD태그의 width와 height를 강제로 바꿔줍니다. 
 +iframe 에  name=myframe 주는거랑..  onload=doResize() 함수 호출하는거랑..
 +td에 id=container 주는거랑만 주의하면.. 될듯..
 +
 +
 +
 +====test====
 +
 +새 옶션 seamless
 +
 +
 +<code html >
 +<head>
 +...
 +<script>
 +function doResize() 
 +
 +container.height = myframe.document.body.scrollHeight; 
 +container.width = myframe.document.body.scrollWidth; 
 +
 +</script>
 +</head>
 +<body>
 +
 +<?php if ($xe!=null) 
 + echo '<iframe src="www.animint.net/xe?act=...." scrolling=no name="myframe" width="100%" height="100%" 
 +marginwidth="0" marginheight="0" frameborder="no" onload="doResize()"></iframe> ';
 +
 +else tpl_contents();
 +
 +?>
 +</body>
 +
 +....
 +</code>
 +
 +^  누구나 수정하실 수 있습니다.  문법은 [[wiki:syntax]]참조하세요. |
 +
 +