iframe element - by. UXKM

iframe element 설명

<iframe> 요소는 인라인 프레임(inline frame)을 정의할 때 사용합니다.
인라인 프레임은 현재 HTML 문서에 다른 문서를 포함시킬 때 사용합니다.
<iframe> 요소의 시작 태그와 종료 태그 사이에는 <iframe> 요소를 지원하지 않는 브라우저를 위한 텍스트를 포함할 수 있습니다.
주로 다른 도메인 또는 하위 도메인의 리소스를 포함하는 데 사용되지만 동일한 도메인의 콘텐츠도 포함하는 데 사용할 수 있습니다.
<iframe>의 장점은 임베디드 코드가 '라이브'상태이며 부모 문서와 통신 할 수 있다는 것입니다.

HTML5에서는 <iframe> 요소의 align, frameborder, longdesc, marginheight, marginwidth, scrolling 속성이 더 이상 지원되지 않도록 변경되었습니다.
또한, sandbox 속성과 srcdoc 속성이 새롭게 추가되었습니다.
seamless 속성은 WHATWG 및 W3C HTML5 사양 모두에서 속성이 제거되었습니다. XHTML에서는 name 속성을 더 이상 지원하지 않으므로, name 속성 대신 전역 속성인 id 속성을 사용해야 합니다.

CSS 기본값 :

6.1.1. iframe 속성

[src] <iframe src="URL">

<iframe> 요소에 보일 문서의 URL를 명시합니다.(address of the resource)

[width & height] <iframe width="픽셀(200)" height="픽셀(200)">

<iframe> 요소의 너비(horizontal dimension)와 높이(vertical dimension)를 픽셀(pixel) 단위로 명시합니다.
HTML 4.01에서 <iframe> 요소의 width, height 속성값은 픽셀(pixel) 단위뿐만 아니라 퍼센트(%) 단위로도 정의할 수 있었습니다.
하지만 HTML5에서는 오직 픽셀(pixel) 단위만을 사용해야 합니다.

[name] <iframe name="이름">

<iframe> 요소의 이름을 명시합니다.(name of nested browsing context)
name 속성은 자바스크립트에서 해당 요소를 참조하기 위해 사용되거나, <a> 요소나 <form> 요소의 target 속성이나, <input> 요소 또는 <button> 요소의 formtarget 속성의 속성값으로 사용될 수 있습니다.
XHTML에서는 name 속성을 더 이상 지원하지 않으므로, name 속성 대신 전역 속성인 id 속성을 사용해야 합니다.

[srcdoc] <iframe srcdoc="HTML 코드(요소에 보일 HTML 코드로 반드시 유효한 HTML 코드이어야 함.)">

<iframe> 요소에 보일 웹 페이지의 HTML 코드를 명시합니다.(a document to render in the iframe)
만약 srcdoc 속성이 명시되어 있고 해당 브라우저가 srcdoc 속성을 지원하면, <iframe> 요소의 src 속성값은 srcdoc 속성값으로 재정의될 것입니다.
하지만 srcdoc 속성이 명시되어 있지만 해당 브라우저가 srcdoc 속성을 지원하지 않으면, 브라우저는 src 속성에 명시된 파일을 <iframe> 요소에 보여줄 것입니다.
srcdoc 속성은 HTML5에서 새롭게 추가된 속성입니다.
Edge, Internet Explorer에서는 지원하지 않습니다.

[sandbox] <iframe sandbox="속성값">

<iframe> 요소에 보일 콘텐츠에 대한 추가적인 제한 사항(restrictions)들의 집합을 명시합니다.(security rules for nested content)
<iframe> 요소의 sandbox 속성은 HTML5에서 새롭게 추가된 속성입니다.

  • 실제 존재하지 않는 도메인(오리진)에 속한 것으로 간주하므로 자신이 소속된 도메인과도(allow-scripts에 의해 실행이 가능해져도) 통신할 수 없습니다.
  • 플러그인 실행 금지.
  • 자바스크립트 사용 금지.
  • 폼 요소에 의한 페이지 호출 금지.

사용 가능한 속성 값

  1. sandbox(빈 값)

    모든 제한 사항(restrictions)을 적용합니다.

  2. allow-forms

    리소스(resource)가 폼 데이터를 제출할 수 있도록 허용합니다.

  3. allow-modals

    리소스가 모달 윈도우(modal window)를 열 수 있도록 허용합니다.

  4. allow-orientation-lock

    리소스가 화면 방향 전환을 잠글 수 있도록 허용합니다.

  5. allow-pointer-lock

    리소스가 Pointer Lock API를 사용할 수 있도록 허용합니다.

  6. allow-popups

    window.open()이나 target="_blank", showModalDialog() 등의 팝업(popup)을 허용합니다.

  7. allow-popups-to-escape-sandbox

    모든 제한 사항이 적용된 문서(sandboxed document)에서 새로운 창(window)을 열 때 제한 사항을 상속받지 않은 창을 열 수 있도록 허용합니다.

  8. allow-presentation

    리소스가 프레젠테이션 세션(presentation section)을 시작할 수 있도록 허용합니다.

  9. allow-same-origin

    리소스가 same-origin policy를 통과된 것처럼 취급될 수 있도록 허용합니다.

  10. allow-scripts

    리소스가 스크립트를 실행할 수 있도록 허용하지만, 팝업창은 생성하지 못합니다.

  11. allow-storage-access-by-user-activation

    리소스가 Storage Access API를 사용하여 상위 스토리지 기능에 접근 요청을 할 수 있도록 허용합니다.

  12. allow-top-navigation

    리소스가 최상위 브라우징 컨텍스트(_top)를 탐색할 수 있도록 허용합니다.

  13. allow-top-navigation-by-user-activation

    리소스가 사용자의 요청이 있을 때만 최상위 브라우징 컨텍스트(_top)를 탐색할 수 있도록 허용합니다.

6.1.2. iframe 속성 간단 요약

[기본 속성]

<iframe name="test" src="주소" width="500" height="100" frameborder="0" scrolling="no"></iframe>

  • src : 아이프레임 홈페이지 url 주소
  • width : 아이프레임 가로 넓이
  • height: 아이프레임 세로 길이
  • frameborder : 테두리 굵기. 0이면 테두리 없음

  • scrolling : 스크롤바 표시

    scrolling="no"는 스크롤바 없음
    scrolling="yes"는 무조건 스크롤바 표시
    scrolling="auto"는 스크롤바 자동 표시

  • align : 정렬

    align="left" 왼쪽 정렬
    align="right" 오른쪽 정렬
    align="middle" 중앙 정렬
    align="absmiddle" 줄 중간 정렬
  • name : 아이프레임 이름

align, frameborder, scrolling 속성은 html4만 지원되고 html5 는 지원이 안됨.

[html5부터 추가된 속성]

srcdoc 속성 : 주소가 아니라 직접 태그소스를 <iframe>으로 표시할 수 있습니다.
<iframe srcdoc="<p>하이?</p>" </iframe> 이렇게 하면 입력한 태그가 <iframe>내에 표시됩니다.
익스플로러는 지원하지 않습니다.

[sandbox 속성]

보안을 위해서 <iframe>에서 <form>이나 <javascript> 같은 게 실행되지 못하게 합니다. 아이프레임을 통하여 해킹을 자주 시도하여 생긴 속성입니다.

  • '익스플로러10'부터 지원합니다.
  • allow-forms - 폼 실행을 허용합니다.
  • allow-same-origin 같은 도메인의 리소스 이용이 가능합니다.
  • allow-scripts 스크립트 실행을 허용합니다.
  • <iframe sandbox="" src="주소"></iframe>
  • <iframe sandbox="allow-scripts" src="주소"></iframe> 스크립트는 실행이 가능해집니다.

iframe element 예제