Google AMP - Iframes

Google amp-iframeé usado para mostrar iframes na página. Existem algumas condições a serem adicionadas ao amp-iframe e, portanto, não podemos usar iframes normais na página. Este capítulo discute mais sobre isso.

Condições a serem seguidas para iframes

As condições a serem observadas ao usar iframe em páginas AMP são as seguintes:

O url usado em um iframe deve ser uma solicitação https ou URI de dados ou usando o atributo srcdoc .
O amp-iframe por padrão terá o atributo sandbox adicionado a ele. O atributo sandbox será definido como vazio. Um valor vazio para o sandbox significa que o iframe émaximum sandboxed(restrição extra no iframe). Podemos adicionar valores ao sandbox que discutiremos com a ajuda de um exemplo abaixo.
Um amp-iframe não pode ser exibido na parte superior da página, ele deve estar quase 600px de distância do topo ou dentro dos primeiros 75% da janela de visualização quando rolado na parte superior. Caso você precise exibir o iframe no início, você precisa adicionar um espaço reservado ao iframe, que discutiremos com a ajuda de exemplos mais adiante no tutorial.
amp-iframe não deve ter a mesma origem do contêiner. Por exemplo, se o seu site principal for www.xyz.com, você não pode ter iframe src comowww.xyz.com/urlname. Pode levar outro, como.xyz.com, exemplo.xyz.com etc.

Para trabalhar com iframes, precisamos adicionar o seguinte script -

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

O formato do Amp-iframe é o seguinte -

<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>

Vamos entender isso com a ajuda de um exemplo de trabalho, onde usaremos iframe para exibir os mapas do Google, conforme mostrado abaixo.

Exemplo

<!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>

Resultado

Observe que colocamos o iframe a mais de 600px do topo. Ele dá um erro conforme mostrado abaixo -

No exemplo acima, usamos sandbox com os valores fornecidos abaixo -

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

O atributo Sandbox atua como uma permissão para o conteúdo a ser carregado dentro do iframe. Aqui, estamos permitindo que todos os scripts sejam carregados, provenientes dos links do Google Maps. No caso de não estarmos dando o atributo sandbox, este é o erro exibido que bloqueia o conteúdo a ser carregado no iframe -

Observe que temos que dar a permissão certa para a sandbox. Você pode encontrar os detalhes de todas as permissões a serem concedidas ao sandbox aqui -https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox.

Podemos usar o atributo placeholder dentro de um amp-iframe para nos livrarmos da condição de mais de 600px.

Um exemplo prático para o mesmo é dado abaixo -

<!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>

Usamos amp-img como marcador de posição da seguinte forma -

<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>

Nesse caso, a restrição de 600px e amp-iframe na janela de visualização de 75% não é considerada. Um indicador de carregamento (três pontos) é mostrado na imagem e é usado como espaço reservado, que é basicamente para o amp-iframe src. Uma vez que o conteúdo do iframe é carregado, a imagem é removida e o conteúdo do iframe é mostrado conforme exibido na saída mostrada abaixo -

Resultado

↰ Previous page Next page ↱