by아라마 postedDec 29, 2019

아이프레임의 온갖 옵션

Extra Form
출처 https://handyhelper.tistory.com/146
어떤 특정사이트에 일부분만 모니터링하거나 여러 웹페이지에 화면을 모니터링해야하는 경우 유용하게 사용할수있습니다.
이번 메뉴얼에서는 몇군데에 웹페이지에서 특정 부분만 모아서 한페이지에서 볼수있도록 만들어보겠습니다.
이렇게 한페이지에 모아서 보는 이유는 화면전환을 따로 하지 않아도되고 모니터공간 활용도 매우 높습니다.
전 3개에 다른 웹페이지에서 일부분만 보이도록 ifame을 활용해보겠습니다.


3개에 웹페이지에 필요한 화면입니다.

- WTI유 실시간 가격(WTI.html)


 - 다우존스 선물(dowjones.html)


- 중국증시(cn.html)



위 3개에 웹페이지에 실시간으로 움직이는 그래프만 한곳에 모아 놓고 보려고합니다.
따로 웹페이지를 왔다갔다 하면서 볼수도 있지만 한곳에 모아놓고 보면 편리하겠죠.


우선 결과물을 보여드리겠습니다.(index.html)


어떤가요? 모니터 한쪽에 이렇게 띄워놓고 본다면 편리하겠죠.


우선 필요한 HTML파일은 4개입니다.
각 웹페이지마다 한개씩 HTML파일(WTI, dowjones, cn)이 필요하고
통합적으로 한곳에서 보여줄 index파일이 필요합니다.


각파일들에 소스들입니다.

- WTI.html 파일
-------------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>

<div style="position:absolute; top:-489px; left:-0px;border:1px solid black">
  <iframe src="http://kr.investing.com/commodities/crude-oil" width="650" height="850" scrolling="no" frameborder="0"></iframe>
 </div>

</body>
</html>
-----------------------------------------------------------------

- dowjones.html 파일
*****************************************
<!DOCTYPE html>
<html>
<body>

<div style="position:absolute; top:-489px; left:-0px;border:1px solid black">
  <iframe src="http://kr.investing.com/indices/us-30-futures" width="650" height="850" scrolling="no" frameborder="0"></iframe>
 </div>

</body>
</html>
****************************************

- cn.html 파일
-----------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>

<div style="position:absolute; top:-289px; left:-170px;border:1px solid black">
  <iframe src="http://gu.qq.com/sh000001" width="820" height="900" scrolling="no" frameborder="0"></iframe>
 </div>

</body>
</html>
-------------------------------------------------------------------

- index.html 파일
**********************************************
<!DOCTYPE html>
<html>
<body>

<div>
<iframe src="WTI.html" width="650" height="360" scrolling="no" frameborder="2">
  <p>Your browser does not support iframes.</p>
</iframe>
</div>

<div>
<iframe src="dowjones.html" width="650" height="360" scrolling="no" frameborder="2">
  <p>Your browser does not support iframes.</p>
</iframe>
</div>

<div>
<iframe src="cn.html" width="650" height="380" scrolling="no" frameborder="2">
  <p>Your browser does not support iframes.</p>
</iframe>
</div>

</body>
</html>
*******************************************************



위 소스를 복사해서 4개에 파일을 만들고 index.html파일을 web페이지에서 열면 제가 만들어 놓은 화면을 볼수있습니다.
본이이 보고 싶은 화면을 만들고 싶다면 아래 이미지를 보시고 참보하세요.
중요한 부분만 설명을 달아놓았습니다.


WTI.html



index.html


다른 웹페이지도 응용해서 불러올수 있겠죠.
이만 포스팅을 마침니다.


출처: https://handyhelper.tistory.com/146 [Handy Helper]

자유게시판

마음대로 모아담은 잡동사니, 말말말

List of Articles
번호 카테고리 제목 글쓴이 날짜 조회 수
공지 참조하고 있는 웹사이트 목록 아라마 2013.05.04 5496
112 XE 스케치북 게시판설치와 설정 file 아라마 2020.03.27 23
111 RedUTF8.exe 텍스트 파일 UTF8 일괄변환 file 아라마 2020.03.15 29
110 모든게시판에서 글등록할때 Duplicat entry 'XXX' for key 1 오류 해결방법 안녕하세요~^^ 오늘은 Duplicat entry 'XXX' for key 1 오류 해결방법을 알려드릴려합니다. Duplicat entry 'xxx' for key 1 (가운데숫자는 사이트마다 다릅니다.... 아라마 2020.02.06 58
» 아이프레임의 온갖 옵션 어떤 특정사이트에 일부분만 모니터링하거나 여러 웹페이지에 화면을 모니터링해야하는 경우 유용하게 사용할수있습니다. 이번 메뉴얼에서는 몇군데에 웹페이지에... 아라마 2019.12.29 81
108 아이프레임 높이 100%유지 스크롤 없애기 아라마 2019.12.29 83
107 READ 나는 앉은 채로 세상의 모든 고뇌를 바라본다 아라마 2019.11.16 65
106 READ 내 안에 내가 찾던 것 있었네 아라마 2019.11.15 56
105 READ 생의 계단 – 헤르만 헤세 아라마 2019.11.15 175
104 READ 진정한 여행 진정한 여행 가장 훌륭한 시는 아직 씌어지지 않았다 가장 아름다운 노래는 아직 불려지지 않았다 최고의 날들은 아직 살지 않은 날들 가장 넓은 바다는 아직 항... 아라마 2019.11.15 61
103 TOOL 크롬 브라우저에서 유투브 동영상 다운로드 하는 간단한 방법 크롬 브라우저에서 유투브 동영상 다운로드 하는 간단한 방법 어떠한 3rd party 앱을 설치 하지 않고도, 크롬 브라우저 만 설치 (MS-Windows, 맥, 크롬북 등등) ... 아라마 2017.06.03 803
102 TOOL xdt 버튼만들기 file anonymous 2014.02.25 172
101 TOOL 파일명 일괄변경 프로그램 Change Name file 아라마 2013.07.05 2462
100 공지 동안거 기간중 [11월24~2월19일] 홈페이지 작업 일시중지 1 아라마 2015.11.22 620
99 READ [법정스님] 무소유 아라마 2013.09.20 1787
98 READ [칼릴지브란] 예언자 file 아라마 2013.10.11 7000
97 수행자는 file 아라마 2015.11.18 358
96 강신주 철학고전읽기 1강 ~ 10강 동영상강좌 모음 아라마 2014.10.06 1073
95 종백님의 명품속독법 강의 총괄 아라마 2013.12.09 1688
94 티벳 사자의 서 1/2 아라마 2013.05.05 1370
93 티벳 사자의 서 2/2 아라마 2015.11.13 45
92 아이프레임 로딩시 스크롤 없이 100%로 보기(iframe 크기 자동 조절) anonymous 2014.06.15 9040
91 TOOL 무설치 온라인 오디오 변환기 http://media.io/ anonymous 2014.06.14 2810
90 READ 수레바퀴 아래서 file 아라마 2015.11.13 517
89 READ 아우의 인상화 file 아라마 2015.11.13 468
88 READ 흰 그림자 file 아라마 2015.11.13 563
87 READ 또 다른 고향 file 아라마 2015.11.13 49
86 READ 참회록 file 아라마 2015.11.13 73
85 READ file 아라마 2015.11.13 35
84 READ 쉽게 씌여진 시 file 아라마 2015.11.12 121
83 READ 소년 file 아라마 2015.11.12 35
82 READ 자화상 file 아라마 2015.11.12 39
81 READ 서시 file 아라마 2015.11.12 35
80 READ 바다 file 아라마 2015.11.12 54
79 READ 별 헤는 밤 file 아라마 2015.11.12 84
78 READ 내가 이렇게 외면하고 file 아라마 2015.11.12 144
77 READ 고독 file 아라마 2015.11.12 236
76 READ 나와 나타샤와 흰 당나귀 file 아라마 2015.11.12 87
75 READ 흰 바람벽이 있어 file 아라마 2015.11.12 90
74 READ 소금 file 아라마 2015.11.12 65
73 READ file 아라마 2015.11.12 53
72 READ 초승달 file 아라마 2015.11.12 42
71 READ 밥값 file 아라마 2015.11.12 47
70 아홉가지 일상수행 발원 file 아라마 2015.11.09 106
69 세세생생 발원합니다 아라마 2015.11.09 23
68 마음의 품 file 아라마 2013.07.09 1554
67 무소의 뿔처럼 혼자서 가라 file 아라마 2013.07.09 1518
66 행자 스님이란 file 아라마 2013.05.05 2547
65 공지 회원가입 오류 수정햇 습니다 아라마 2015.11.08 230
64 공지 홈페이지 작업목표 아라마 2015.11.08 206
Board Pagination Prev 1 2 3 Next
/ 3