Google AMP-Iframe

구글 amp-iframe페이지에 iframe을 표시하는 데 사용됩니다. amp-iframe에 추가해야하는 조건이 있으므로 페이지에서 일반 iframe을 사용할 수 없습니다. 이 장에서는 이에 대해 자세히 설명합니다.

iFrame에 따라야 할 조건

AMP 페이지에서 iframe을 사용할 때주의해야 할 조건은 다음과 같습니다.

  • iframe에서 사용되는 URL은 https 요청 또는 데이터 URI 이거나 srcdoc 속성 을 사용해야 합니다.

  • 기본적으로 amp-iframe에는 샌드 박스 속성이 추가됩니다. 샌드 박스 속성은 비어 있음으로 설정됩니다. 샌드 박스 값이 비어 있으면 iframe이maximum sandboxed(iframe에 대한 추가 제한). 아래 예제의 도움으로 논의 할 샌드 박스에 값을 추가 할 수 있습니다.

  • amp-iframe은 페이지 상단에 표시 할 수 없으며 상단에서 거의 600px 떨어져 있거나 상단으로 스크롤 할 때 표시 영역의 처음 75 % 이내에 있어야합니다. 처음에 iframe을 표시해야하는 경우 iframe에 자리 표시자를 추가해야합니다.이 부분은 자습서 뒷부분의 예제를 통해 설명합니다.

  • amp-iframe은 컨테이너와 원본이 동일하지 않아야합니다. 예를 들어 기본 사이트가 www.xyz.com에있는 경우 iframe src를 다음과 같이 사용할 수 없습니다.www.xyz.com/urlname. xyz.com, example.xyz.com 등과 같은 다른 것을 취할 수 있습니다.

iframe을 사용하려면 다음 스크립트를 추가해야합니다.

<script async custom-element = "amp-iframe" 
   src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Amp-iframe 형식은 다음과 같습니다.

<amp-iframe width = "600" title = "Google map" 
   height = "400" layout = "responsive"
   sandbox = "allow-scripts allow-same-origin allow-popups"
   frameborder = "0"
   src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed">
</amp-iframe>

아래에 주어진 것처럼 iframe을 사용하여 Google지도를 표시하는 작업 예제를 통해이를 이해하겠습니다.

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Iframe</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">

      <style amp-boilerplate>
         body{
            -webkit-animation:-amp-start 8s steps(1,end) 0s 
            1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both}
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style><noscript>
      <style amp-boilerplate>
         body{-webkit-animation:none;-moz-animation:
         none;-ms-animation:none;animation:none}
      </style></noscript>

      <script async custom-element = "amp-iframe" 
         src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js"
      ></script>
      
      <style>
         div {
            height:850px;
            text-align:center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Iframe</h3>
      <div>
         Google Maps in Iframe
      </div>
      <h3>Google AMP - Amp Iframe</h3>
      <amp-iframe width = "600"
         title = "Google map"
         height = "400"
         layout = "responsive"
         sandbox = "allow-scripts allow-same-origin allow-popups"
         frameborder = "0" src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed">
      </amp-iframe>
   </body>
</html>

산출

iframe을 상단에서 600px 이상 떨어진 곳에 배치했습니다. 아래와 같이 오류가 발생합니다.

위의 예에서 우리는 아래와 같은 값을 가진 샌드 박스를 사용했습니다.

sandbox = "allow-scripts allow-same-origin allow-popups"

Sandbox 속성은 iframe 내부에로드되는 콘텐츠에 대한 권한처럼 작동합니다. 여기에서 Google지도 링크에서 오는 모든 스크립트를로드 할 수 있습니다. 샌드 박스 속성을 제공하지 않는 경우 iframe에로드되는 콘텐츠를 차단하는 오류가 표시됩니다.

샌드 박스에 대한 올바른 권한을 부여해야합니다. 여기에서 샌드 박스에 부여 할 모든 권한에 대한 세부 정보를 찾을 수 있습니다.https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox.

amp-iframe 내부의 자리 표시 자 속성을 사용하여 600px 이상의 조건을 제거 할 수 있습니다.

동일한 작업 예가 아래에 나와 있습니다.

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Iframe</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,  minimum-scale=1,initial-scale=1">

      <style amp-boilerplate>
         body{
            -webkit-animation:-amp-start 8s steps(1,end) 0s 
            1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>

      <script async custom-element = "amp-iframe" 
         src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
      </script>

      <style>
         div {
            height:850px;
            text-align:center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp Iframe</h3>

      <amp-iframe width = "600"
         title = "Google map"
         height = "400"
         layout = "responsive"
         sandbox = "allow-scripts allow-same-origin allow-popups"
         frameborder = "0"
         src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed">

         <amp-img layout = "fill" src = "images/loading.jpg" placeholder></amp-img>
      </amp-iframe>
   </body>
</html>

다음과 같이 amp-img를 자리 표시 자로 사용했습니다.

<amp-iframe width = "600"
   title = "Google map"
   height = "400"
   layout = "responsive"
   sandbox = "allow-scripts allow-same-origin allow-popups"
   frameborder = "0"
   src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie = UTF8&iwloc = &output = embed">
   
   <amp-img layout = "fill" src = "images/loading.jpg" placeholder></amp-img>
</amp-iframe>

이 경우 75 % 뷰포트에서 600px 및 amp-iframe 제한은 고려되지 않습니다. 이미지에 표시된로드 표시기 (점 3 개)는 기본적으로 amp-iframe src에 대한 자리 표시 자로 사용됩니다. iframe 콘텐츠가로드되면 이미지가 제거되고 iframe 콘텐츠가 아래 표시된 출력과 같이 표시됩니다.

산출