| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 | 31 |
- Eclipse
- 나의 프로젝트
- ejb
- Lift
- Node.js
- php thumbnail
- 나의 취미
- 디즈니씨
- Cross
- 스킨 스쿠버
- iBatis
- 주식이야기
- 책이야기
- node.js web framework
- scala
- rss
- 도커
- 명사 추출기
- C/C++
- ajax
- 메일왕창보내는법
- 베트남어
- php
- docker
- nodejs express
- express for node.js
- ror실행
- 명사 분석기
- flex3
- 명사 뽑아내기
- Today
- Total
nkdk의 세상
Iframe 모든 것을 표현하는 것이 가능할 것이다! 본문
iframe을 쓰면 정말 모든 것이 가능할 것이다. 일단 화면 상에 레이아웃 같은 것을 띄어서 독립된 공간에서 실행 할 수 있는 환경을 구축 할 수가 있다.
DOM의 객체 구조 안에 객체로 들어 있기 때문에 이동하는 것과 보이고 보이지 않는 것들 그리고 크기 조절이 모두 가능하기 때문이다. Iframe을 이용해서 html 을 구성해 보겠다.
<html>
<head>
<script type='text/javascript'>
window.onload=function() {
var iframe=document.getElementById('dataFeed');
var src='datafeeds/mydata.xml';
loadDatasynchronously(iframe, src);
}
function loadDatasynchronously(iframe, src) {
// IFrame 으로 데이터를 받아 오게 하자
}
</script>
</head>
<body>
<!-- 화면에 표시할 내용들이 들어 간다. -->
<iframe id='dataFeed' style='height:0px;width:0px;'>
</iframe>
</body>
</html>
간단하게 받아서 뿌릴 경우에는 다음과 같이 설정 하면 된다.
이제 IFrame을 생성하는 법을 해 보도록 하겠습니다.
function fetchData() {
var iframe=document.createElement('iframe');
iframe.className='hiddenDataFeed';
document.body.appendChild(iframe);
var src='datafeeds/mydata.xml';
loadDataAsynchronously(iframe, src);
}
다음과 같이 iframe을 생성하면 된다.
다음회에서는 사용자 인터페이스의 다른 쪽 면에서 서버와 비동기적으로 통신 하는 방법에 대해서 설명하겠습니다.
XmlDocument, XMLHttpRequest 정도의 내용이 되겠네요.