iframe로 원하는 부분만 출력하기 (예제포함)

2011. 3. 10. 11:0199. 정리전 - IT/29. IT 잡동지식


이하의 예제는 윈도우XP WEB 형식의 바탕화면에 맞추어 제작하였습니다.

■ BrickInside DB 출력
 <div id="wrap" style="position:absolute; top:-655px; left:-15px;">
  <iframe src="http://www.brickinside.com" width="122" height="673" scrolling="no" frameborder="0"></iframe>
 </div>

■ KWeather 출력 (오늘날씨, 내일날씨)
파일1번
 <div style="position:absolute; top:-800px; left:-35px;">
  <iframe src="http://www.kweather.co.kr/main/index.htm" width="360" height="874" scrolling="no" frameborder="0"></iframe>
 </div>
 
파일2번
 <div style="position:absolute; top:-655px; left:-200px;">
  <iframe src="http://www.kweather.co.kr/main/index.htm" width="360" height="729" scrolling="no" frameborder="0"></iframe>
 </div>


이하 문서의 출처 : http://ekorea.tistory.com/1067

아이프레임을 2개 중첩하면 만들수 있더랍니다.
갖어올 파일과, 표시할 파일이 필요하구요.

가져올파일 소스를 아래와 같이 합니다.
예) piece.html
---------------------------------------------------------

 <div id="wrap" style="position:absolute; top:-세로시작값px; left:-가로시작값px;">
  <iframe src="가져올주소" width="1000" height="1000" scrolling="no" frameborder="0"></iframe>
 </div>

---------------------------------------------------------
가로시작값이나, 세로 시작값은 페이지 출력이 시작되는 좌표 입니다.


표시할 파일 소스는 아래와 같이 합니다.
---------------------------------------------------------

 <iframe src="piece.html" width="가로크기" height="세로크기" frameborder="0" scrolling="no"></iframe>

---------------------------------------------------------

원리나 방법은 무척이나 간편하죠?
단점은 출력되는 좌표값을 알아내는게 어려울 뿐입니다.
곰곰히 생각하니 갖어올 페이지를 일일이 만들어야 되는것도 귀찮구요.

그래서 위치 에디터와 갖어올 파일을 생성하는 소스도 만들어 봤습니다.

각종 폼 값을 입력 후 Piece Size에서,
클릭으로 가로와, 세로 위치를, Shift+클릭으로 크기를 지정하면 소스를 만들어 줍니다.

에디터 미리보기 : http://qurx.net/_tools/wp/editor.html
소스 받기 : http://qurx.net/_tools/wp.zip



생성기(index.html)는 주소에 옵션을 입력하는 방식입니다
이 옵션을 에디터에 그대로 대입하면 옵션 그대로 수정할 수 있습니다.

예) u=주소&y=가로시작값x=세로시작값

에디터 지원 옵션------------------------------------------

u : 주소
y : 가로시작값
x : 세로시작값
w : 가로크기
h : 세로크기
l  : 링크옵션 [기본 0](1/링크방지, 2/원본사이트, URL/특정주소)
c : 배경색

에디터 미 지원 옵션---------------------------------------

ffx : 파이어폭스 세로 값
ffy : 파이어폭스 가로 값
opx : 오페라 세로값
opy : 오페라 가로값
r : 가져오는 페이지 해상도 [기본 1000,1000](가로,세로)
p : 링크시 타겟 [기본 parent]


---------------------------------------------------------

문제점이 있다면
1 . 로딩 후 특정 폼으로 이동하는 페이지의 경우 위치가 틀어집니다.
2 . 브라우저마다 위치가 다를 수 있습니다(ffx, ffy, opx, opy 사용으로 해결!)

사이트의 소스를 재가공하는 방식이 아니기에 저작권에 문제는 없을 듯 합니다만,
원본페이지의 운영자가 거부하는 경우 될수 있으면 사용하면 안되겠죠?