Google AMP - Iframes

Google amp-iframese usa para mostrar iframes en la página. Hay algunas condiciones que se deben agregar a amp-iframe y, por lo tanto, no podemos usar iframes normales en la página. Este capítulo trata más sobre esto.

Condiciones a seguir para iFrames

Las condiciones que se deben tener en cuenta al usar iframe en las páginas AMP son las siguientes:

La URL utilizada en un iframe debe ser una solicitud https o data-URI o usar el atributo srcdoc .
amp-iframe por defecto tendrá el atributo sandbox agregado. El atributo sandbox se establecerá en vacío. Un valor vacío en la zona de pruebas significa que el iframe esmaximum sandboxed(restricción adicional en iframe). Podemos agregar valores a la caja de arena que discutiremos con la ayuda de un ejemplo a continuación.
Un amp-iframe no se puede mostrar en la parte superior de la página, debe estar a casi 600 px de la parte superior o dentro del primer 75% de la ventana gráfica cuando se desplaza en la parte superior. En caso de que tenga que mostrar el iframe al principio, debe agregar un marcador de posición al iframe que analizaremos con la ayuda de ejemplos más adelante en el tutorial.
amp-iframe no debe tener el mismo origen que el contenedor. Por ejemplo, si su sitio principal está en www.xyz.com, no puede tener iframe src comowww.xyz.com/urlname. Puede tomar otros como.xyz.com, example.xyz.com, etc.

Para trabajar con iframes, necesitamos agregar el siguiente script:

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

El formato de amp-iframe es el siguiente:

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

Entendamos esto con la ayuda de un ejemplo práctico en el que usaremos iframe para mostrar mapas de Google como se indica a continuación.

Ejemplo

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

Salida

Observe que hemos colocado el iframe a más de 600px de la parte superior. Da un error como se muestra a continuación:

En el ejemplo anterior, hemos utilizado sandbox con los valores que se indican a continuación:

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

El atributo Sandbox actúa como un permiso para que los contenidos se carguen dentro del iframe. Aquí permitimos que se carguen todos los scripts que provienen de los enlaces de mapas de Google. En caso de que no estemos dando el atributo sandbox, este es el error que se muestra que bloquea el contenido que se cargará en el iframe -

Tenga en cuenta que tenemos que otorgar el permiso correcto al sandbox. Puede encontrar los detalles de todos los permisos que se otorgarán a sandbox aquí:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox.

Podemos hacer uso del atributo de marcador de posición dentro de un amp-iframe para deshacernos de la condición de más de 600px.

Un ejemplo de trabajo para el mismo se da a continuación:

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

Hemos utilizado amp-img como marcador de posición de la siguiente manera:

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

En este caso, no se considera la restricción de 600px y amp-iframe en la ventana gráfica del 75%. Se muestra un indicador de carga (tres puntos) en la imagen que se usa como marcador de posición, que es básicamente para amp-iframe src. Una vez que se cargan los contenidos del iframe, la imagen se elimina y el contenido del iframe se muestra como se muestra en el resultado que se muestra a continuación:

Salida

↰ Previous page Next page ↱