amp-iframe
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.
Description
iframe을 표시합니다.
Required Scripts
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Supported Layouts
iframe을 표시합니다.
| 필수 스크립트 | <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script> |
| 지원되는 레이아웃 | fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive |
| 예 | amp-iframe의 주석이 포함된 코드 예 |
동작
amp-iframe에는 보안을 강화하고 단일 iframe에서 좌우하는 AMP 파일을 방지하도록 디자인된 vanilla iframe과 다른 중요한 여러 차이점이 있습니다.
amp-iframe은 문서의 상단 근처에 표시되지 않을 수 있습니다(아래 설명된 대로placeholder를 사용하는 iframe 제외). iframe은 상단에서 600픽셀 떨어져 있거나 상단으로 스크롤할 때 표시 영역의 처음 75% 안에 포함되지 않아야 하며, 둘 중 더 작은 값으로 지정됩니다.- 기본적으로 amp-iframe은 샌드박스 처리됩니다(세부정보 참조).
amp-iframe은 HTTPS, data-URI 또는srcdoc속성을 통해서만 리소스를 요청해야 합니다.sandbox속성에서allow-same-origin을 허용하지 않는 경우를 제외하고amp-iframe은 컨테이너와 같은 원본에 없어야 합니다. iframe에 허용되는 원본에 관한 자세한 정보는 'Iframe 원본 정책' 문서를 참조하세요.
예: amp-iframe에서 Google 지도 삽입
<amp-iframe width="200" height="100"
sandbox="allow-scripts allow-same-origin"
layout="responsive"
frameborder="0"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=iceland">
</amp-iframe>
렌더링 방식:
amp-iframe의 더 많은 데모를 보려면 AMP By Example을 참조하세요. 광고에 amp-iframe 사용
amp-iframe을 광고 표시의 주용도로 사용해서는 안 됩니다. 일부가 광고인 동영상을 표시하는 용도로 amp-iframe을 사용하는 것은 괜찮습니다. 이 AMP 정책은 각 iframe을 렌더링하지 않아도 적용될 수 있습니다.
광고 사용 사례에서는 대신 amp-ad를 사용해야 합니다.
이 정책의 이유는 다음과 같습니다.
amp-iframe에서는 샌드박스를 시행하고, 샌드박스는 하위 iframe에도 적용됩니다. 즉, 광고 자체는 작동하는 것으로 보여도 방문 페이지가 손상되었을 수 있습니다.amp-iframe에서는 iframe에 구성을 전달하는 메커니즘을 제공하지 않습니다.amp-iframe에는 iframe에서 완전히 제어하는 크기 조정 메커니즘이 없습니다.- 조회가능성 정보는
amp-iframe에 사용하지 못할 수 있습니다.
속성
| src | src 속성은 주로 표준 iframe에서와 같이 작동합니다. 단, 한 가지 예외가 있습니다. 소스 문서가 AMP 컨텍스트에 삽입되어 있음을 알 수 있도록 URL에 #amp=1 단편이 추가됩니다. 이 단편은 src로 지정된 URL에 아직 단편이 없는 경우에만 추가됩니다. |
| srcdoc, frameborder, allowfullscreen, allowpaymentrequest, allowtransparency, referrerpolicy | 이 속성은 모두 표준 iframe에서와 같이 동작해야 합니다. |