다른 사이트의 내용을 원하는 부분만 출력하는 팁입니다.
제 사이트를 제 다른 사이트에 표시하기 위에 이미 서비스가 제공되는 다른 사이트를 이용해 봤지만
생각보다 맘에 들지 않더라구요, 그래서 직접 만들어 봤습니다.
생각해 보니 아이프레임을 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 사용으로 해결!)
사이트의 소스를 재가공하는 방식이 아니기에 저작권에 문제는 없을 듯 합니다만,
원본페이지의 운영자가 거부하는 경우 될수 있으면 사용하면 안되겠죠?
<![CDATA[<html>
<head>
<title>World Piece!</title>
<style type="text/css">.another_category {
border: 1px solid #E5E5E5;
padding: 10px 10px 5px;
margin: 10px 0;
clear: both;
}
.another_category h4 {
font-size: 12px !important;
margin: 0 !important;
border-bottom: 1px solid #E5E5E5 !important;
padding: 2px 0 6px !important;
}
.another_category h4 a {
font-weight: bold !important;
}
.another_category table {
table-layout: fixed;
border-collapse: collapse;
width: 100% !important;
margin-top: 10px !important;
}
* html .another_category table {
width: auto !important;
}
*:first-child + html .another_category table {
width: auto !important;
}
.another_category th, .another_category td {
padding: 0 0 4px !important;
}
.another_category th {
text-align: left;
font-size: 12px !important;
font-weight: normal;
word-break: break-all;
overflow: hidden;
line-height: 1.5;
}
.another_category td {
text-align: right;
width: 80px;
font-size: 11px;
}
.another_category th a {
font-weight: normal;
text-decoration: none;
border: none !important;
}
.another_category th a.current {
font-weight: bold;
text-decoration: none !important;
border-bottom: 1px solid !important;
}
.another_category th span {
font-weight: normal;
text-decoration: none;
font: 10px Tahoma, Sans-serif;
border: none !important;
}
.another_category_color_gray, .another_category_color_gray h4 {
border-color: #E5E5E5 !important;
}
.another_category_color_gray * {
color: #909090 !important;
}
.another_category_color_gray th a.current {
border-color: #909090 !important;
}
.another_category_color_gray h4, .another_category_color_gray h4 a {
color: #737373 !important;
}
.another_category_color_red, .another_category_color_red h4 {
border-color: #F6D4D3 !important;
}
.another_category_color_red * {
color: #E86869 !important;
}
.another_category_color_red th a.current {
border-color: #E86869 !important;
}
.another_category_color_red h4, .another_category_color_red h4 a {
color: #ED0908 !important;
}
.another_category_color_green, .another_category_color_green h4 {
border-color: #CCE7C8 !important;
}
.another_category_color_green * {
color: #64C05B !important;
}
.another_category_color_green th a.current {
border-color: #64C05B !important;
}
.another_category_color_green h4, .another_category_color_green h4 a {
color: #3EA731 !important;
}
.another_category_color_blue, .another_category_color_blue h4 {
border-color: #C8DAF2 !important;
}
.another_category_color_blue * {
color: #477FD6 !important;
}
.another_category_color_blue th a.current {
border-color: #477FD6 !important;
}
.another_category_color_blue h4, .another_category_color_blue h4 a {
color: #1960CA !important;
}
.another_category_color_violet, .another_category_color_violet h4 {
border-color: #E1CEEC !important;
}
.another_category_color_violet * {
color: #9D64C5 !important;
}
.another_category_color_violet th a.current {
border-color: #9D64C5 !important;
}
.another_category_color_violet h4, .another_category_color_violet h4 a {
color: #7E2CB5 !important;
}
</style>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-9f215d513ac1c1fc530f1b625c346be762e46741/static/style/revenue.css"/>
<link rel="canonical" href="https://tipinfo.tistory.com/1067"/>
<!-- BEGIN STRUCTURED_DATA -->
<script type="application/ld+json">
{"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://tipinfo.tistory.com/1067","name":null},"url":"https://tipinfo.tistory.com/1067","headline":"웹사이트 특정 부분만 출력하기 - iframe","description":"다른 사이트의 내용을 원하는 부분만 출력하는 팁입니다. 제 사이트를 제 다른 사이트에 표시하기 위에 이미 서비스가 제공되는 다른 사이트를 이용해 봤지만 생각보다 맘에 들지 않더라구요, 그래서 직접 만들어 봤습니다. 생각해 보니 아이프레임을 2개 중첩하면 만들수 있더랍니다. 갖어올 파일과, 표시할 파일이 필요하구요. 가져올파일 소스를 아래와 같이 합니다. 예) piece.html --------------------------------------------------------- --------------------------------------------------------- 가로시작값이나, 세로 시작값은 페이지 출력이 시작되는 좌표 입니다. 표시할 파일 소스는 아래와 같이 합니다. --------..","author":{"@type":"Person","name":"tipInfo","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"2007-10-09T18:51:57+09:00","dateModified":"2007-10-09T18:51:57+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}}
</script>
<!-- END STRUCTURED_DATA -->
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-9f215d513ac1c1fc530f1b625c346be762e46741/static/style/dialog.css"/>
<link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-9f215d513ac1c1fc530f1b625c346be762e46741/static/style/postBtn.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-9f215d513ac1c1fc530f1b625c346be762e46741/static/style/tistory.css"/>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-9f215d513ac1c1fc530f1b625c346be762e46741/static/script/common.js"></script>
</head>
<body>
<h1>World Piece!</h1>
<div>
<!-- World Piece -->
<!-- http://qurx.net/_tools/wp/editor.html?u=http%3A//media.daum.net/%3Fnil_profile%3Dg%26nil_newstitle%3D0&x=148&y=148&w=367&h=459&l=0 -->
<iframe src="http://qurx.net/_tools/wp?u=http%3A//media.daum.net/%3Fnil_profile%3Dg%26nil_newstitle%3D0&x=148&y=148&w=367&h=459&l=0&" width="367" height="459" frameborder="0" scrolling="no" style="margin-right:130px">
</iframe>
<!-- /World Piece -->
<!-- World Piece -->
<!-- http://qurx.net/_tools/wp/editor.html?u=http%3A//cartoon.media.daum.net/&x=12&y=201&w=125&h=498&l=1&l=http%3A//llllll.org -->
<iframe src="http://qurx.net/_tools/wp?u=http%3A//cartoon.media.daum.net/&x=12&y=201&w=125&h=498&l=1&l=http%3A//llllll.org" width="125" height="498" frameborder="0" scrolling="no">
</iframe>
<!-- /World Piece -->
</div>
<div>
<!-- World Piece -->
<!-- http://qurx.net/_tools/wp/editor.html?u=http%3A//cartoon.media.daum.net/&x=151&y=408&w=629&h=354&l=1&l=http%3A//llllll.org -->
<iframe src="http://qurx.net/_tools/wp?u=http%3A//cartoon.media.daum.net/&x=151&y=408&w=629&h=354&l=1&l=http%3A//llllll.org&p=3" width="629" height="354" frameborder="0" scrolling="no">
</iframe>
<!-- /World Piece -->
</div>
<div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-9f215d513ac1c1fc530f1b625c346be762e46741/static/script/common.js"></script>
<script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script>
<script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script>
<script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"280080-1067","customProps":{"userId":"0","blogId":"280080","entryId":"1067","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"1067","entryTitle":"웹사이트 특정 부분만 출력하기 - iframe","entryType":"POST","categoryName":"인터넷정보","categoryId":"190224","serviceCategoryName":null,"serviceCategoryId":null,"author":"102315","authorNickname":"알 수 없는 사용자","blogNmae":"INFOTIP","image":"","plink":"/1067","tags":[]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script>
<script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js"></script>
<script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js" nomodule="true" defer="true"></script>
<script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js" nomodule="true" defer="true"></script>
</body>
</html>]]>