iframe (inline-frame)

• iframe 은 Frame 의 일종
• Frame 이란 브라우저 창을 여러 세그먼트로 분할 하여, 서로 다른 페이지들을 한 페이지에서 표현 할 수 있는 기술
  • https://ko.wikipedia.org/wiki/프레임_(월드_와이드_웹)?source=post_page-----1cd866b71c8f--------------------------------
• 하지만 Frame은 여러 이유로 W3C에서 사용하지 않을 것을 권고함.
  • 모바일 및 반응형 디자인 부적합 (고정된 레이아웃을 전제로 한다.)
  • 접근성에 부적절.
• 반면 iframe 은 위의 이슈를 어느정도 개선함
  • CSS와 함께 <iframe>을 사용하여 반응형 레이아웃을 구현 가능. 고정된 크기의 프레임과 달리, <iframe>은 다양한 화면 크기에 맞출 수 있음.
• 페이지에 Frame 을 넣을 때 사용된다.
• sandbox 어트리뷰트 설정을 사용하여, iframe 에서 form 이나 javascript 가 실행되지 않도록 막을 수 있다.
  2

iframe 과 Browsing Context

• 하나의 문서는 하나의 window 를 갖는다.
• 그렇다면 서로 다른 iframe 에서는 어떻게 window 를 구분하나?
• iframe 도 독립적인 Browsing Context 를 갖는다.

iframe window

• iframe 에 로드된 페이지는 부모 페이지와 별개의 페이지이다.

• 때문에, 부모 window context와는 별개의 window context를 갖는다.

• 하나의 페이지에서는 여러 iframe 을 포함 할 수 있다. 전체 iframe 목록을 확인하기 위해서 document.getElementByTagName('iframe) 혹은 window.frames로 확인 가능.

• 이 때, window.frames은 ArrayLike인 frameList를 반환한다.

• 각각의 부모 페이지에서 iframe 의 window 에 접근하기 위해서는 contentWindow로 접근 가능

  • 이 contentWindow 속성은 HTMLIframeElement의 Window 객체를 반환하게 되며, 이 객체를 사용하여 iframe 문서 및 내부 DOM에 액세스 및 조작 가능하다.