window란?
지금 수행중인 javascript 가 포함된 <html> </html> 사이의 html문서가 바로 window이다.
그래서 본인 자신의 window 객체의 하위 요소를 다룰때는 window생략이 가능하다.
예를 들어서 window.document 는 document와 동일하다.
window.self란?
없어도 될것 같은데.. 왜 있는지 모르겠다.. test code를 만들어서 시험을 해보면... window.self.self.self == window 이다.
또 window.self.self == self 이다.
즉 자기 자신을 가리키는 객체인데. 없어도 무방할것 같은데.. 왜 있는건지.. -_-;;
window.frames[]
web 화면은 여러개의 frame들로 구성될수 있다.
개별 각각의 frame들은 하나의 window라고 할수 있다.
아래 화면과 같은 frame이 있다고 하면..
header , left, up, down 각각의 frame(==html문서)은 window 이다.
Down 부분에서도 불수 있듯이.. frames[idx]는 window 객체와 동일하다.
(참조 : window.parent.parent.frames[1].frames[2] == window )
그래서 header frame(==html문서)에 있는 javascript 및 변수를 참조하고 싶다면..
해당 frame경로를 잘 찾아가면 아래와 같이 호출 할 수 있다.
아래는 header html문서의 showMe()라는 javascript function을 down html 에서 호출하는 예제이다.
( window.parent.parent.frames[0].name == header 임을 down frame에서 볼수 있다. )
window.parent.parent.frames[0].showMe();
window.parent 이해
web화면은 위의 예제처럼 아주 계층적으로 복잡하게 구성되어 있어도 window.parent,window.top, 및 frames등의 객체를 통해서 접근하여 다양한 operation을 할수 있다.
window.parent란 window의 부모 window이다. window.parent.parent는 부모의 보모를 말한다.
down frame에서 header frame의 window 객체를 얻으려면 아래와 같이 접근해야 한다.
window.parent.parent.frames[0]
복잡하긴 하지만.. 가능은 하다..
억지스런 테스트를 해보면.. down frame에서 자기자신 window (== self)를 아래와 같이 접근도 가능하다.
window.parent.parent.frames[1].frames[2].name
잡자기 떠오르는 의문하나..
getElementById 처럼 이름으로 frame을 찾을수는 없나? 그렇다면.. 부모의 부모의 몇번째 자식의 몇번째 자식과 같이 탐색하지 말고.. frame 이름만 줘서 frame을 얻을수 있으면 실수도 줄이고 정말 좋을텐데.. 사실.. parent.parent.frames[0].frames[3] 이 먼지 눈으로 보고는 알수가 없다.
그래서 찾아봤더니 방법이 있다 이름을 주면 된다..
window.top.frames['mainframe'].frames['down'].name == down 이다. 훨씬 눈으로 보고 이해하기에 좋다.
좀더 자세한 내용은 아래 블로그글을 참조하고..
http://mungchung.com/xe/lecture/8217?PHPSESSID=94613544664b277fd64408f8420357ca
window.top
이름에서 유추할수 있듯이.. window의 가장 상위 window를 한번에 얻어올수 있다.
window.parent.parent.parent.parent.parent. 으로 접근할것을... window.top으로 바로 접근가능한것이다.
down frame에서 header frame의 이름을 얻기위해서 아래 2가지 방법으로 접근가능하다.
window.top.frames[0].name window.parent.parent.frames[0].name document.write( "window.top.frames['header'].name
top window로 접근한다는 것 이외에.. window.top은 좀더 특별한 용도로 사용가능하다.
여러 frame간에 간단히 java script 변수를 공유할때 아주 유용하다.
down frame에서 아래와 같이 변수에 값을 할당하고 header frame의 showMe( )함수를 호출하면..
window.top.my_variable 을 참조하여 alert을 띄운다.
// ex_down.html 에서 변수 값 설정..
window.top.my_variable = "test text";
// 함수호출..
window.parent.parent.frames[0].showMe();
// ex_header.html 의 showMe 함수 부분
function showMe()
{
alert( "header : " + window.top.my_variable);
}
그럼 window.top 에 저장된 변수는 언제까지 유효할까??
브라우져의 다른 tab이나 다른 창에서는 window.top.my_variable를 참조하면 undefined로 값이 나온다..
현재 top window가 갱신되지 않으면 계속 해당 변수는 유효하다.
Left 메뉴에서 새로운 파일이 실행된 이후에.. window.top.my_variable 를 참조할수 있는지 확인해 볼수 있다.
target에 따라서 결과는 다르다..
_top or _blank : undefined
_self or _parent : 접근가능
브라우져에서 F5로 창을 갱신하면 어떻게 될까???
그러면 window.top이 갱신되므로 해당 변수도 없어져 버린다.
그래서 하나의 단일 창을 띄워놓고.. window.top 객체를 계속 유지하면서 동작하는 화면을 구현하려면..
mainframe이나 header의 내용은 변경되더라도...top이 갱신되지 않으면.. top개체에 다양한 변수를 저장했다가 사용할 수 있으므로 아주 유용하다.
C사에서 다루었던 A 시스템의 경우에도 동일한 형태로 구현이 되어 있었다.
window.top.dialogHandle 을 저장해두고.. main 화면이 계속 변경되지만.. 변경된 main 화면에서 dialogHandle 변수를 가지고. .. 필요할때 dialog를 close하거나, 닫기도 하고.. 유연하게 사용을 하였다.
첨부된 파일을 시험해보면.. 간단히 동작을 이해할수 있을듯..
IE,Firefox등에서는 탐색기에 압축풀고 ex_top.html 파일을 열면 정상동작한다.
하지만 Chrome에서는 보안오류가 발생하는데, 다른 frame에 있는 javascript 경로 접근시에 오류가 발생하는것이다.
Web Server 경로에 파일들을 두고.. localhost:8080/../ex_top.html 로 열면 정상적으로 동작하는것을 볼수 있다.
ex_src.zip'FrontEnd > JavaScript' 카테고리의 다른 글
| IE에서 유용한 Javascript 디버거 Companion.JS (0) | 2013.12.23 |
|---|---|
| javascript에서 array 복사 (0) | 2013.12.13 |
| 같은 이름을 갖는...element들을 배열로 얻어와서 다루기.. (0) | 2013.11.20 |
| JSON 데이타 다루기.. (0) | 2013.11.20 |
| AJAX Call 기본 형태.. (0) | 2013.11.20 |