다중 창과 프레임

아래와 같은 web application 이 있다. 

	탑메뉴
메뉴	본문 (IFRAME)

메인 페이지에는 지속적으로 호출 되는 ajax call이 있다. 

왼쪽 메뉴를 클릭하면 본문의  iframe이 갱신된다.

어떤 본문 페이지를 디버깅 중이었는데, 메인페이지에서 호출되는 ajax로그는 찍히는데

해당  ajax 메서드에 찍은 콘솔 로그는 안찍히는 것이었다.

그래서 코뿔소 책을 보니 메인페이지의 window와 본문(iframe)의 window는 

메인의  window.frames[0] 이고 각 페이지에 선언된 전역 변수는 따로 있는것이다.

하지만 상호 간섭하는 코드는 없어서 문제는 없다.

window	탑메뉴
메뉴	본문 (IFRAME)   window

책에서 발췌

window 객체가 클라이언트 측 자바스크립트 코드의 전역 객체로 사용되고 그 창은 자신이 포함하고 있는 자바스크립트 코드의 실행 컨텍스트로써 사용된다는 것을 알아 보았다. 이것은 프레임에서도 마찬가지다. 모든 프레인은 독립적인 자바스크립트 실행 컨텍스트 이다.  모든 window객체는 자신만의 고유한 전역 객체이기 때문에 각 창은 자신만의 이름 공간과 자신만의 전역 변수 집합을 정의한다. 따라서 다중 프레임과 창의 관점에서 바라보면 전역 변수들이 더이상 전역이 아닌것처럼 보이고 만다.  

window 객체들은 frames, parent, top 등의 프로퍼티를 사용하여 참조할 수 있다.

** 그럼 메인페이지의 콘솔 로그를 볼라면 어떻게 해야하나?

firefox-firebug 기준으로 설명. 

아랫쪽 명령어 입력 하는곳에 

cd(top) 을하면 가장 상위 프레임으로 이동

cd(top.frames[1]) 메인 프레임 아래 두번째 프레임 

* IE :  http://msdn.microsoft.com/en-us/library/ie/gg589530%28v=vs.85%29.aspx#UsingCDacrossFrames

*chrome : http://stackoverflow.com/questions/3275816/debugging-iframes-with-chrome-developer-tools