HTMLIFrame


매개 변수

속성 세부
name 으로 사용되는 요소의 이름을 설정합니다 iframe을의 변경 태그 a src .
width 요소의 폭을 픽셀 단위로 설정합니다.
height 요소의 높이를 픽셀 단위로 설정합니다.
src 프레임에 표시 할 페이지를 지정합니다.
srcdoc 브라우저가 지원한다고 가정하고 프레임에 표시 할 내용을 지정합니다. 내용은 유효한 HTML이어야합니다.
sandbox 설정된 경우 iframe의 내용이 고유 한 출처로 취급되며 스크립트, 플러그인, 양식 및 팝업을 포함한 기능이 비활성화됩니다. 공백으로 구분 된 값 목록을 추가하여 선택적으로 제한을 완화 할 수 있습니다. 가능한 값은 비고에있는 표를 참조하십시오.
allowfullscreen iframe의 내용에서 requestFullscreen() 을 사용하도록 허용할지 여부

비고

iframe은 다른 HTML 문서에 다른 문서를 포함시키는 데 사용됩니다.

다음과 같은 iframe을 사용하여 표시 할 수 있습니다.

  • 같은 도메인에있는 다른 HTML 페이지들;
  • 다른 도메인의 다른 HTML 페이지 (아래 - 동일한 출처 정책 참조);
  • PDF 문서 (IE에는 몇 가지 문제가있을 수 있지만 이 질문 은 도움 될 수 있음).

책갈피와 탐색에 문제가 있으므로 iframe을 최후의 수단으로 사용해야하며 항상 iframe 이외의 옵션이 더 있습니다. 이 질문 은 iframe의 기복에 대해 더 많이 이해하는 데 도움이됩니다.


동일 출처 정책

일부 사이트는 동일한 출처 정책 이라는 정책을 시행하기 때문에 iframe을 사용하여 표시 할 수 없습니다. 즉, iframe이있는 사이트는 표시 할 사이트와 동일한 도메인에 있어야합니다.

이 정책은 iFrame 내부에있는 콘텐츠를 조작하는데도 적용됩니다. iFrame이 다른 도메인의 콘텐츠에 액세스하는 경우 iFrame 내부의 콘텐츠에 액세스하거나 조작 할 수 없습니다.

W3C 의 iframe 요소


sandbox 속성

sandbox 속성을 설정하면 iframe에 추가 제한 사항이 추가됩니다. 공백으로 구분 된 토큰 목록을 사용하여 이러한 제한을 완화 할 수 있습니다.

세부
allow-forms 양식을 제출할 수 있습니다.
allow-pointer-lock JavaScript 포인터 API를 사용합니다.
allow-popups 팝업은 window.open 또는 <a target="_blank" 사용하여 만들 수 있습니다.
allow-same-origin iframe 문서는 고유 한 고유 한 것이 아니라 실제 원본을 사용합니다. allow-scripts 와 함께 allow-scripts 하면 iframe 문서는 상위 문서와 같은 출처에서 온 모든 샌드 박싱을 제거 할 수 있습니다.
allow-scripts 스크립트를 사용합니다. iframe 문서와 부모 문서는 postMessage() API를 사용하여 서로 통신 할 수 있습니다. allow-same-origin 과 함께 allow-same-origin 하면 iframe 문서는 상위 문서와 같은 출처에서 온 모든 샌드 박스를 제거 할 수 있습니다.
allow-top-navigation iframe의 내용으로 최상위 수준 문서의 위치를 ​​변경할 수 있습니다.

IFrame 관련 예