수색…
매개 변수
| 속성 | 세부 |
|---|---|
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"은 인라인 프레임을 의미합니다. 그것은 귀하의 페이지에 다른 페이지를 포함하는 데 사용될 수 있습니다. 이렇게하면 base.html 의 정확한 내용을 보여주는 작은 프레임이 base.html .
<iframe src="base.html"></iframe>
프레임 크기 설정
IFrame은 width 및 height 속성을 사용하여 크기를 조정할 수 있습니다. 값은 픽셀 단위로 표시됩니다 (HTML 4.01 허용 백분율 값, HTML 5는 CSS 픽셀 값만 허용).
<iframe src="base.html" width="800" height="600"></iframe>
IFrame과 앵커 사용
일반적으로 Iframe 내의 웹 페이지 변경은 Iframe에서 시작됩니다 (예 : Ifame 내부의 링크 클릭). 그러나 IFrame 외부에서 IFrame 콘텐츠를 변경할 수 있습니다. href 속성이 원하는 URL로 설정되고 target 속성이 iframe의 name 속성으로 설정된 앵커 태그를 사용할 수 있습니다.
<iframe src="webpage.html" name="myIframe"></iframe>
<a href="different_webpage.html" target="myIframe">Change the Iframe content to different_webpage.html</a>
"srcdoc"속성 사용하기
srcdoc 속성은 src 속성 대신에 전체 HTML 문서로 iframe의 정확한 내용을 지정하는 데 사용될 수 있습니다. 이렇게하면 "IFrame is cool!"이라는 텍스트가있는 IFrame이 생성됩니다.
<iframe srcdoc="<p>IFrames are cool!</p>"></iframe>
브라우저에서 srcdoc 속성을 지원하지 않으면 IFrame은 src 속성을 사용하여 폴백합니다. 그러나 src 및 srcdoc 속성이 브라우저에 표시되고 지원되는 경우 srcdoc 이 우선합니다.
<iframe srcdoc="<p>Iframes are cool!</p>" src="base.html"></iframe>
위의 예에서 브라우저가 srcdoc 속성을 지원하지 않으면 대신 base.html 페이지의 내용을 표시합니다.
샌드 박싱
다음은 모든 제한이 활성화 된 신뢰할 수없는 웹 페이지를 포함합니다.
<iframe sandbox src="http://example.com/"></iframe>
페이지에서 스크립트를 실행하고 양식을 제출할 수있게하려면 allow allow-scripts 및 allow-forms 를 sandbox attribute .
<iframe sandbox="allow-scripts allow-forms" src="http://example.com/"></iframe>
상위 웹 페이지와 동일한 도메인에 신뢰할 수없는 콘텐츠 (예 : 사용자 의견)가있는 경우 iframe을 사용하여 스크립트를 비활성화하고 부모 문서가 JavaScript를 사용하여 콘텐츠와 상호 작용할 수 있습니다.
<iframe sandbox="allow-same-origin allow-top-navigation" src="http://example.com/untrusted/comments/page2">
부모 문서는 이벤트 리스너를 추가하고 해당 내용에 맞게 IFrame의 크기를 조정할 수 있습니다. 이렇게 allow-top-navigation 과 함께 샌드 박스 표시된 iframe을 부모 문서의 일부로 표시 할 수 있습니다.
이 샌드 박스는 입력을 새 니타 이징하는 대신 에 심층 방어 전략의 일부로 사용할 수 있습니다.
또한이 샌드 박스는 사용자가 iframe의 소스를 직접 방문하도록 유도하는 침입자에 의해 파괴 될 수 있음을 알아 두십시오. 콘텐츠 보안 정책 HTTP 헤더를 사용하여이 공격을 완화 할 수 있습니다.