iframe contentDocument contentWindow 차이

iframe contentDocument contentWindow 차이

 

 

오늘의 iframe 요소에 접근하는 contentDocument와 contentWindow의 차이를 알아보겠습니다.

 

contentDocument, contentWindow 둘 다 iframe 하위 오소에 접근 할 수 있는 방법입니다.

contentWindow 는 iframe의 window (전역)을 의미하고,

contentWindow.document 는 contentDocument와 같습니다.

 

contentWindow가 contentDocument의 상위 요소 라고 할수 도 있겠네요.

 

IE에서는 contentWindow는 5.5 버전부터, 

contentDocument는 8버전부터 지원을 합니다.

 

 

추가적으로 iframe간 포커스 이동을 구현하면서 발생한 문제점에 대해 설명하겠습니다.

 

 

위와같은 구조의 HTML 이 있습니다.

table > tr > td > div > iframe 의 구조입니다. 

 

 

10개의 iframe 이 있고, iframe 간 tab, shift+tab 으로 이동이 가능하게끔 구현을 하려 합니다. 

아무것도 없는 경우 iframe.contentDocument.body.focus(); 로 이동이 가능하지만,

iframe 이전 siblings에 다른 요소를 추가 할 경우 포커스 이동이 안되었었습니다.

 

예를 들어 이미지가 추가 된 경우

 

 

포커스가 다음 요소로 이동이 되지 않았습니다.

같은 구조의 iframe이 존재 하지만, iframe 보다 z-index가 높은 요소가 있을 경우 contentDocument의 body로

포커스가 가지 않았죠. display : none 이 아니어도 포커스가 이동되지 않았습니다.

 

그래서 이럴 경우 contentWindow로 포커스를 보내면 정상동작 했습니다.

iframe.contentWindow.focus();