window, document, frame, iframe 이해하기

발생일: 2014.11.30

키워드: window, document, frames, iframe, 윈도우, 도큐먼트, 프레임, 아이프레임

문제:
자바스크립트를 처음 접하는 사람들은 대부분 window 와 document 에 대한 개념을 헷갈려한다.
더불어, 윈도우와 프레임의 관계, frame 과 iframe, iframe 과 window 등등…

웹서핑을 하다가 이 개념들을 잘 설명하고 있는 포스트를 하나 발견해서,
이참에 나도 초보자를 대상으로 이해하기 쉽게 설명해두려고 한다.


해결책:

window

`window`는 브라우저를 시작할 때 가장 처음 생성되는 객체이다.
이 ‘창’을 생성하고 난 후에, 이 안에 다른 ‘창’(window)나 ‘문서’(document)를 추가할 수 있다.

`window` 객체는 몇 가지 주요한 속성을 갖고 있다.
  - name: 윈도우의 이름
  - outerWidth, outerHeight, innerWidth, innerHeight: 창의 크기


window 와 frame

`window`는 자식 `window`를 가질 수도 있다.

최근엔 거의 사용하지 않지만,
아래처럼 <frameset> 태그 아래에 <frame> 태그로 ‘프레임’을 정의해 자식 윈도우를 생성할 수 있다.

<frameset>
  <frame src=“”></frame>
  <frame src=“”></frame>
</frameset>

용어가 좀 헷갈리지만, 프레임과 윈도우는 동일한 개념이라 생각하면 이해하기 쉽다.
다만, 프레임은 ‘영역’에 대한 개념을 설명하기 위한 용어라고 생각하면 된다.


window 간 관계

한 윈도우에 여러 윈도우가 공존할 수 있기 때문에, 윈도우 객체는 각 윈도우와의 관계를 파악하기 위한 속성을 갖고 있다.

  - length: 윈도우가 자식 윈도우를 몇 개나 갖고 있는지
  - frames: 자식 윈도우 객체의 참조를 갖는 배열
  - self, parent, top: 윈도우에 대한 참조. 순서대로 자기 자신, 부모, 최상위 윈도우 

아래 이미지를 보면 각 윈도우의 관계를 이해할 수 있다.




document

`document`는 객체는 브라우저에서 로드한 컨텐츠(html 이나 xml 등)를 대변하는 객체이다.

`document`는 `window` 안에 로드되고, 아래와 같은 속성을 갖고 있다.
- title: 문서의 제목
- URL: 문서의 주소
- domain: 문서의 도메인 정보
- cookie: 쿠키 정보

각 속성을 잘 살펴보면, `document`와 `window`가 명확히 다른 특성을 갖고 있음을 알 수 있다.





iframe

아이프레임은 `<iframe>` 태그로 생성할 수 있는데, 문서 내에 존재하는 ‘프레임(=윈도우)’라고 생각하면 된다.

아래 이미지를 보면 그 구조를 이해하기 쉽다.




다른 프레임처럼 `iframe`도, `iframe`을 포함하는 윈도우의 `frames` 속성으로 가져올 수 있다.
`iframe`도 윈도우지만, 독특한 구조 때문에 엘리먼트로 존재하기 때문에 `iframe`의 윈도우 객체는 `contentWindow`라는 별도의 속성에 담겨있다.

예를 들어, 아래와 같은 문서가 있다면,

  <body>
  <iframe id=“iframeA” src=“”></iframe>
  </body>

자바스크립트에서는 아래와 같이 조회해볼 수 있다.

  window.frames.length; //—> 1
  window.frames[0]; //—> iframe 의 window 객체
  document.getElementById(‘iframeA’); //—> iframe 엘리먼트
  document.getElementById(‘iframeA’).contentWindow; //—> iframe 의 window 객체



끝. ^^;;


카테고리

분류 전체보기 (711)
About me. (6)
Daylogs (676)
영어공부 (0)
My works - 추억 (29)
비공개 (0)