티스토리 뷰
키워드: 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 객체
끝. ^^;;
반응형
댓글
공지사항