윈도우의 각각의 문서로 구성된 구분된 창틀 FRAMESET 엘레멘트 속의 개별 프레임을 참조한다.

	Script	[propVal=.].propName;
	HTML	propName="propVal">innerString

대체 가능한 문법

window.propertyName
self.propertyName
parent.propertyName
top.propertyName

인수

frame

<FRAMESET> 와 <FRAME> 으로 설정되며 <FRAMESET> 안에 Javascript onLoad() 와 onUnload() 이벤트처리자를 포함시킬 수 있다.

frameName

<FRAME> 에서의 정의 된 이름(name)이다.

index

정수로 된 frame 인수 번호로서, 배열변수(Array) 기준에 따른다.

propertyName

아래 열거한 frame 의 속성(property)들 중의 하나이다.

windowObj

선택적이고 newWin=window.open(...) 등으로 만들어진 window의 이름(name) 또는 top 혹은 parent등 window의 대체명칭이다.

생성

frame 개체는 HTML <FRAMESET><FRAME>..</FRAME></FRAMESET> 태그로 생성된다.

<FRAMESET>
  <FRAME></FRAME>
  <FRAME></FRAME>
</FRAMESET>

구성

frame 개체는 큰 화면(screen) 안에 위치 한 구획된 작은 화면들을 의미하며, 각 frame은 각각 다른 문서로서 하나의 document 개체에 해당되며, 별도의 주소(URL)를 가지고, 각각의 별도의 속성을 가지며, 설정 할 수 있다. frame 개체는 사용 한 기록 (history list)인 속성 history 개체를 가지므로 전번 화면으로 이동 할 수도 있다.

구성

한 window에는 여러개의 frame 개체들을 가질수 있고 각 frame 개체들의 집합으로 하나의 배열변수(Array) frame 개체를 구성한다. 한 문서(document)에 한개의 frames 컬렉션을 갖을 수 있다.

document.frames,
document.frames[0], document.frames[1], ..., document.frames[n]

사용

Javascript 로 개별적인 frame 개체에 접속하고 조정하여 사용 할 수 있다.
frame 개체들 한 스크린을 분할하여 여러 문서(document)들을 window로 표현 한 것으로, 일부 예외를 제외하고는 속성들, 메서드들, 이벤트들이 같이 적용된다. window개체를 참고하라.

호출

frames 컬렉션은 배열변수(Array)로서 인수(index)를 이용하여 저장되거나 호출된다.
첫번째 데이터의 인수는 0이고, 두번째는 1, 세번째는 2, ..., n번째는 n-1이 된다.
총 데이터의 갯수는 제일 큰 인수+1이 원칙이지만 중간에 빈 개체들을 가질 수 있다.

myVal=obj[index]; // 변수에 배열변수 값을 할당
obj[index]=myVal; // 배열변수에 값을 할당

특기

보안 경고 : 개인의 보안을 위하여 Explorer은 다른 도메인의 웹페이지 프레임 사이의 일부 연결의 제한을 제공한다.

frame 개체에 있는 페이지의 개체모델을 통하여 frame 개체의 내용은 아니고 속성들에 접속할 수 있다.
예를들어 frame 개체의 margin 스타일에 접속하기 위하여 예제 문장을 참조하라.

사용자가 frame 속의 웹폴더를 클릭하거나 Web folder 속의 파일이나 폴더를 클릭하면 전체의 윈도우에 표시된다.
예를들어 두개의 프레임을 갖는 윈도우에서 한 프레임은 웹페이지를, 다른 프레임은 네트워크 드라이브를 포함하고 있는데 후자에서 폴더나 파일을 클릭하면 전자의 프레임을 포함한 전체의 윈도우에 표시된다.
텍스트(txt) 파일처럼 브라우저가 호스팅할 수 없는 파일을 클릭하면 호스트에서 적당한 방식으로 새로운 윈도우 전체의 화면에 표시된다.

Web folder는 파일시스템 체계의 일 부분이지만, 파일시스템의 내용이 아닐 수 있는데 인접 네트워크(Network Neighborhood)가 그 예이다.

IE5.5은 FRAME의 투명한 내용을 지원하는데 투명하기 위해서는 다음의 조건을 충족시켜야 한다.

1. FRAME의 allowTransparency 속성이 true로 설정되어야 한다.
2. FRAME 문서 내용속의 BODY 엘레멘트의 background-color나 bgcolor 애트리뷰트가 투명(transparent)으로 설정되어야 한다.

이 개체는 스크립트를 포함하여 IE3.0부터 적용된다.

이 엘레멘트는 블럭모드이다.

이 엘레멘트는 종료태그를 필요로 하지 않는다.

참조

frameSet

이 개체는 HTML 4.0에서 정의되었고 (영문)DOM Level 1(W3C Document Object Model)에 정의되었다.

설명을 위한 예제

document 속성 IE NS
⇒ window의 frame 개체의 문서를 반환하거나 지정한다.

문법: .document[=oVal]

코드: document.write(oObj.document.location) 결과:

frames(컬렉션) 속성 IE3.02 NS2
⇒ window의 frame 개체들를의 배열변수를 반환한다.

문법: .frames

코드: document.write(top.frames) 결과:
코드: document.write(top.frames.length) 결과:

name 속성 IE3.02 NS2 (name="sVal" > 애트리뷰트)
⇒ 프레임의 이름을 반환하거나 설정한다.

문법: .name[=sVal]

코드: document.write(oObj.name); 결과:

parent(개체) 속성 IE3.02 NS2
⇒ 모체 frame 개체가 있는 윈도우를 반환한다. 현 frame 개체를 선언한 <FRAMESET> 가 있는 frame 개체이다.

문법: [oVal=]parent.frames

코드: document.write(parent.frames.name) 결과:

self(개체) 속성 IE
⇒ 현재의 윈도우나 프레임의 참조를 반환한다.

문법: [oVal=].self
문법: [oVal=]self.frames

코드: document.write(self.oObj.name; 결과:
코드: document.write(self.frames.name) 결과:

src 속성 IE4 NS6 (src=urlVal> 애트리뷰트)
⇒ 개체의 로딩될 주소(URL)를 반환하거나 지정한다. <FRAME src="srcName">에서 정의한 위치(src)이다.

문법: .src[=sVal]

코드: document.write(oObj.src); 결과:
코드: document.write(oObj.document.location) 결과:

window(개체) 속성 IE NS
⇒ window의 자체 frame 개체를 반환한다. self 속성과 같다.

문법: [oVal=]window.frames

문법: [oVal=]frames.window

코드: document.write(window.oObj.name) 결과:
코드: document.write(window.frames.name) 결과:
코드: document.write(frames.window.name) 결과:
코드: document.write(top.frames[0].name) 결과:
코드: document.write(parent.frames.name) 결과:

메서드	설명
addBehavior	엘레멘트에 behavior를 추가한다.
applyElement	개체를 다른 엘레멘트의 자식이나 모체 개체로 만든다.
attachEvent	IE - 이벤트에 특정 기능을 묶어, 기능함수가 개체에서 이벤트가 발생되면 언제나 호출되게 한다. 이벤트의 제거는 detachEvent에서 한다. 반환값은 부울값이다. 문법: [bVal=].object.attachEvent(event,functObj) event는 필수요소이고, 표준 이벤트 문자열이다. functObj도 필수요소이고 이벤트가 발생되면 호출될 기능함수이다. 코드: function callFunc(){alert('ondblclick 이벤트 발생')}document.attachEvent('ondblclick',callFunc) 결과: // 문서 위 아무데서나 더블클릭 해 보라. 코드:<INPUT type=button value="attachEvent 재설정" onclick="document.detachEvent('ondblclick',callFunc);document.attachEvent('ondblclick',callFunc)"></SPAN> 결과:
blur	IE NS 개체가 초점을 잃고 onblur 이벤트가 발생된다. 문법: .blur()
clearAttributes	개체의 모든 애트리뷰트들과 값들을 삭제한다.
clearTimeout	IE NS 이전 setTimeout 메서드에 의하여 설정된 시간 진행을 취소한다. 문법: frames.clearTimeout(timeoutID) 코드: window.open('exp/wwindow4.html','test','width=1000,height=500,status=yes')
cloneNode	문서 계통도로부터 개체의 참조를 복사한다.
close	IE4 NS2 프레임 문서를 닫는다. 문법: frames.close()
componentFromPoint	어떤 이벤트에서 지정된 좌표에 위치한 콤포넨트를 반환한다.
contains	개체 속에 주어진 엘레멘트가 있는가를 점검한다.
detachEvent	IE5 - attachEvent 이벤트로 첨부된 이벤트를 제거한다. 반환값은 없다. 문법: .detachEvent(event,funcion) 코드: <INPUT type=button value="detachEvent" onclick="document.detachEvent('ondblclick',callFunc)"></SPAN> 결과: // 클릭 후에는 attachEvent에서 설정된 이벤트가 제거된다. 제거 후 더블클릭해 보라.
dragDrop	ondragstart 이벤트를 시작한다.
fireEvent	개체에서 지정한 이벤트를 발생시킨다.
focus	개체에 초점을 주고 onfocus이벤트에 지정한 처리자 코드를 수행한다. 문법: .focus()
getAdjacentText	개체의 인접 문자열을 반환한다.
getAttribute	지정된 애트리뷰트의 값을 반환한다.
getAttributeNode	IE6 attribute.name속성을 참조하는 attribute 개체를 반환한다.
getElementsByTagName	지정된 엘레멘트의 이름에 맞는 개체들의 컬렉션을 반환한다.
hasChildNodes	개체가 자식개체를 가지고 가지고 있는가를 나타내는 값을 반환한다.
insertAdjacentElement	지정한 위치에 엘레멘트를 삽입한다.
mergeAttributes	지정된 개체에 모든 읽기/쓰기 애트리뷰트를 복사한다.
normalize	IE6 개체의 인접 TextNode 개체를 통합하여 문서 개체 모델을 정상화한다.
removeAttribute	개체로 부터 애트리뷰트를 제거한다.
removeAttributeNode	IE6 개체로 부터 애트리뷰트 개체 노드를 제거한다.
removeBehavior	개체로부터 behavior를 제거한다.
replaceAdjacentText	개체에 인접 문자열을 교체한다.
setActive	개체에 초점을 주지 않은 상태에서 활성으로 설정한다.
setAttribute	지정된 애트리뷰트를 설정한다.
setAttributeNode	IE6 개체의 부분으로 애트리뷰트 개체 노드를 설정한다.
setTimeout	IE NS 이미 지정된 밀리초(millisecond)가 지났는지 평가하기 위하여 윈도우의 기능함수를 호출하거나 검정한다. 문법: frames.setTimeout(expression/function,milliseconds) 코드: window.open('exp/wwindow4.html','test','width=1000,height=500,status=yes')
swapNode	문서 계통도에서 두 개체의 위치를 서로 바꾼다.

이벤트	설명
onactivate	엘레멘트 개체가 activeElement 속성으로 설정되면 발생한다.
onafterupdate	데이터 원본이 있는 개체가 성공적으로 업데이트되면 데이터를 갖는 개체에 발생한다.
onbeforedeactivate	모체 문서에서 activeElement 속성의 엘레멘트 개체가 현재 개체로 다른 개체로 변경되기 바로 전에 발생한다.
onbeforeupdate	원본 데이터를 갖는 개체의 연관된 데이터가 업데이트되기 바로 전에 데이터를 받는 개체에 발생된다.
onblur	IE4 NS3 개체가 초점을 생실했을 때 발생한다. 문법: .onblur='JsCode'
oncontrolselect	사용자가 개체의 제어 선택을 하려고 할 때 발생한다.
ondeactivate	모체 문서에서 activeElement 속성의 엘레멘트 개체가 현재 개체로 다른 개체로 변경되면 발생한다.
onerrorupdate	데이터 원천 개체에서 관련된 데이터가 업데이트되는 동안에 오류가 발생되면 발생된다.
onfocus	IE NS 개체가 초점을 받으면 발생되고 JsCode를 수행한다. 문법: .onfocus='JsCode'
onload	IE3.02 NS2 개체가 부라우저에 로딩이 완료되면 바로 발생한다. 문법: .onload='JsCode'
onmove	개체가 이동하면 발생한다.
onmoveend	개체의 이동이 중지되면 발생한다.
onmovestart	개체가 이동하기 시작하면 발생한다.
onresize	윈도우나 프레임이등 개체의 크기가 조정되었 때 발생한다
onresizeend	제어 섹션에서 개체의 크기 변경이 완료되면 발생한다.
onresizestart	제어 섹션에서 개체의 크기 변경이 시작되면 발생한다.
onunload	초점이 다른 곳으로 이동하여 내용이 언로드되었 때 발생되고 지정된 코드를 수행한다. 문법: frames.onunload='JsCode'

현재 윈도우의 frame구성 보개 예제

<SCRIPT>
br='<BR>';
str='top.location='+top.location+br+br;
str+='top.frames.length='+top.frames.length+br;
for (i=0;i<top.frames.length;i++){ // 상위 프레임 루프
  str+='top.frames['+i+'].name='+top.frames[i].name+' | <FONT color=blue>'+top.frames[i].location+'</FONT>'+br;
  if (top.frames[j].length>1){ // 하위 프레임이 한개 이상이면
    for j=0;j<top.frames[j].length;j++){ // 하위 프레임 루프
      str+='<SPAN style=width:2em></SPAN>top.frames['+i+'].frames['+j+'].name='+
        top.frames[i].frames[j].name+' | <FONT color=teal>'+
        top.frames[i].frames[j].location+'</FONT>'+br;
    }
  }
}
document.write(str); // 결과 문자열을 출력한다.
</SCRIPT>