AMP

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

Muestra un iframe.

 

Required Scripts

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

Muestra un iframe.

Secuencia de comandos obligatoria <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Diseños admitidos fill, fixed, fixed-height, flex-item, intrinsic, nodisplay y responsive
Ejemplos Ejemplo comentado de código de amp-iframe

Comportamiento

amp-iframe presenta varias diferencias importantes con respecto a los iframes estándar que tienen como objetivo aumentar la seguridad y evitar que los archivos AMP estén dominados por un único iframe:

  • Un amp-iframe no aparece cerca de la parte superior del documento, excepto los que utilizan el atributo placeholder (consulta la sección Iframe con marcador de posición de este documento). El iframe debe estar situado a 600 píxeles de distancia de la parte superior o a partir del primer 75 % del viewport cuando el desplazamiento es hasta la parte superior de la página, la opción que sea más pequeña.
  • De forma predeterminada, los amp-iframe están en zona de pruebas (más información).
  • amp-iframe solo debe solicitar recursos a través de HTTPS, de una URI de datos o del atributo srcdoc.
  • amp-iframe no debe estar situado en el mismo origen que el contenedor, a menos que no admitan allow-same-origin en el atributo sandbox. Para obtener más información sobre los orígenes permitidos para iframes, consulta la política de origen de iframe.

Ejemplo: Incrustar un mapa de Google Maps en un amp-iframe

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

Se renderiza así:

Para ver más ejemplos del componente amp-iframe, visita AMP By Example.

Usar amp-iframe con fines publicitarios

amp-iframe ****no debe utilizarse con el propósito principal de mostrar publicidad, ``pero se puede usar para mostrar vídeos que contienen anuncios. Para aplicar esta política, se puede denegar el renderizado de los respectivos iframes.

Cuando la finalidad es mostrar anuncios, se debe utilizar amp-ad.

Los motivos de esta política son los siguientes:

  • amp-iframe aplica la zona de pruebas y también se aplica a los iframes secundarios. Por ello, aunque parezca que el anuncio sí funciona, puede que las páginas de destino no estén disponibles.
  • amp-iframe no proporciona ningún mecanismo para transferir configuración al iframe.
  • amp-iframe no tiene un mecanismo de cambio de tamaño que controle totalmente el iframe.
  • La información de visibilidad puede no estar disponible para amp-iframe.

Atributos

src El atributo src se comporta principalmente como en un iframe estándar, con una excepción: se añade el fragmento #amp=1 a la URL para permitir que los documentos fuente sepan que están insertados en el contexto de AMP. Este fragmento no se añade si la URL definida en src ya tiene uno.
srcdoc, frameborder, allowfullscreen, allowpaymentrequest, allowtransparency y referrerpolicy Todos estos atributos deben funcionar como en los iframes estándar.
Si no se especifica frameborder, su valor predeterminado será 0.
sandbox Los iframes que crea amp-iframe siempre tienen definido el atributo sandbox. El valor está vacío de forma predeterminada, lo que significa que están en "grado máximo de zona de pruebas". Si se definen los valores de sandbox, se puede hacer que el iframe esté menos aislado en la zona de pruebas. Se pueden definir todos los valores que admitan los navegadores. Por ejemplo, sandbox="allow-scripts" permite que el iframe ejecute JavaScript, mientras que sandbox="allow-scripts allow-same-origin" permite que el iframe ejecute JavaScript, haga solicitudes XHR que no sean de CORS y que lea o introduzca cookies.

Si vas a incluir iframes en un documento que no se haya creado específicamente para ponerlo en zona de pruebas, lo más probable es que tengas que añadir allow-scripts allow-same-origin al atributo sandbox, además de otras funciones adicionales.

Ten en cuenta también que la zona de pruebas afecta a todas las ventanas que se abren desde un iframe que esté puesto en zona de pruebas, incluidas las que se abran mediante un enlace que contenga target=_blank (para que esto pueda ocurrir, debes añadir allow-popups). Si añades allow-popups-to-escape-sandbox al atributo sandbox, dichas ventanas se comportarán como ventanas nuevas sin zona de pruebas, que es lo que probablemente quieras y esperes que ocurra la mayoría de las veces. Lamentablemente, en la actualidad allow-popups-to-escape-sandbox solo es compatible con Chrome.

Para obtener más información sobre el atributo "sandbox", consulta los documentos de MDN al respecto.
atributos comunes Este elemento incluye atributos comunes que se aplican a los componentes de AMP.

Iframe con marcador de posición

Se puede incluir un elemento placeholder para lograr que amp-iframe aparezca en la parte superior de un documento``, como se muestra en el ejemplo que aparece más abajo.

  • amp-iframe debe contener un elemento con el atributo placeholder, como amp-img, que se renderiza como marcador de posición hasta que el iframe esté listo para mostrarse.
  • La disponibilidad del iframe se puede conocer escuchando un evento onload del iframe o un embed-ready postMessage que enviaría el documento de iframe, lo que suceda primero.

Ejemplo: Iframe con un marcador de posición

<amp-iframe width=300 height=300
    layout="responsive"
    sandbox="allow-scripts allow-same-origin"
    src="https://foo.com/iframe">
    <amp-img layout="fill" src="https://foo.com/foo.png" placeholder></amp-img>
</amp-iframe>

Ejemplo: Solicitud embed-ready de iframe

window.parent.postMessage({
  sentinel: 'amp',
  type: 'embed-ready'
  }, '*');

Cambio de tamaño del iframe

amp-iframe debe tener un diseño estático definido, como cualquier otro elemento AMP. Sin embargo, se puede cambiar el tamaño de un amp-iframe en el tiempo de ejecución. Para ello:

  1. El amp-iframe debe contener el atributo resizable.
  2. El amp-iframe debe contener un elemento secundario overflow.
  3. El amp-iframe debe tener definido el atributo de zona de pruebas allow-same-origin.
  4. El documento de iframe debe enviar una solicitud embed-size como un mensaje de ventana.
  5. La solicitud embed-size se denegará si su altura es inferior a un determinado umbral (100 px).

Fíjate en que resizable hace que el valor de scrolling cambie a no.

Ejemplo: amp-iframe con elemento overflow

<amp-iframe width=300 height=300
    layout="responsive"
    sandbox="allow-scripts allow-same-origin"
    resizable
    src="https://foo.com/iframe">
    <div overflow tabindex=0 role=button aria-label="Read more">Read more!</div>
</amp-iframe>

Ejemplo: Solicitud de cambio de tamaño de iframe

window.parent.postMessage({
  sentinel: 'amp',
  type: 'embed-size',
  height: document.body.scrollHeight
  }, '*');

Una vez recibido este mensaje, el tiempo de ejecución de AMP intenta procesar la solicitud lo antes posible, pero tiene en cuenta la posición del lector en la página, si continúa el desplazamiento y cualquier otro factor de experiencia de usuario o de rendimiento. Si el tiempo de ejecución no puede aplicar el cambio de tamaño de la solicitud, amp-iframe mostrará un elemento overflow. Al hacer clic en el elemento overflow, se modificará el tamaño del amp-iframe inmediatamente, ya que se activa mediante una acción del usuario.

Algunos factores que afectan a la rapidez con la que se realizará el cambio de tamaño son:

  • Si se ha activado por una acción del usuario.
  • Si se ha solicitado para un iframe que está activo en ese momento.
  • Si se ha solicitado para un iframe situado debajo o encima del viewport.

Visibilidad del iframe

Los iframes pueden enviar un mensaje send-intersections a sus elementos superiores para empezar a recibir registros de cambios de estilo IntersectionObserver de la intersección del iframe con el viewport principal.

Nota: En los siguientes ejemplos, suponemos que la secuencia de comandos se encuentra en el iframe creado, en el que window.parent es la ventana superior. Si la secuencia de comandos se encuentra en un iframe anidado, haz que window.parent sea la ventana superior de AMP.

Ejemplo: Solicitud send-intersections de iframe

window.parent.postMessage({
  sentinel: 'amp',
  type: 'send-intersections'
  }, '*');

El iframe puede escuchar un mensaje intersection de la ventana principal para recibir de él los datos de intersección.

Ejemplo: Solicitud send-intersections de iframe

window.addEventListener('message', function(event) {
  if (event.source != window.parent ||
  event.origin == window.location.origin ||
  !event.data ||
  event.data.sentinel != 'amp' ||
  event.data.type != 'intersection') {
    return;
    }
  event.data.changes.forEach(function (change) {
    console.log(change);
  });
});

El elemento superior envía el mensaje de intersección al iframe cuando este se mueva dentro o fuera del viewport (o esté parcialmente visible), se desplace o se modifique.

Iframes de seguimiento y analíticas

Recomendamos encarecidamente el uso de amp-analytics para realizar analíticas, ya que es una solución mucho más potente, completa y eficiente, y se puede configurar con un gran número de proveedores de analíticas.

AMP solo permite un único iframe por página con fines de analíticas y de seguimiento. Para ahorrar recursos, estos iframes se eliminarán del DOM 5 segundos después de cargarse, lo que debería ser suficiente para llevar a cabo cualquier proceso necesario.

Los iframes se identifican como de seguimiento o de analíticas si no parecen ofrecer una utilidad directa al usuario (p. ej., si son invisibles o pequeños).

Directriz: Es mejor usar otros componentes de AMP antes que amp-iframe

El componente amp-iframe debe considerarse como un respaldo si no se puede ofrecer la experiencia de usuario deseada utilizando otros medios de AMP; es decir, si no existe un componente de AMP que se ocupe de dicho caso práctico. Si se utiliza un componente de AMP diseñado para un caso práctico específico, se logran ventajas como las siguientes:

  • Mejor rendimiento y gestión de los recursos.
  • En algunos casos, los componentes personalizados pueden proporcionar imágenes de marcador de posición integradas. Esto puede suponer, por ejemplo, que se pueda obtener la miniatura correspondiente de un vídeo antes de que este se cargue, y reducir de este modo el esfuerzo que supone añadir un marcador de posición de forma manual a la hora de escribir el código.
  • Cambio de tamaño integrado, lo que supone que el contenido de un iframe de tamaño impredecible se pueda mostrar al usuario como si fuera nativo de la página en lugar de un marco desplazable.
  • Se pueden integrar otras funciones adicionales (por ejemplo, la reproducción automática para reproductores de vídeo).

Validación

Consulta las reglas de amp-iframe en la especificación de la herramienta de validación de AMP.

¿Necesita ayuda adicional?

¿Ha leído este documento una docena de veces pero realmente no responde todas sus preguntas? Quizás otras personas piensen lo mismo: póngase en contacto con ellas en Stack Overflow.

Ir a Stack Overflow
¿Encontró un error o considera que falta una función?

¡El proyecto AMP alienta profundamente su participación y contribuciones! Esperamos que se convierta en un miembro permanente de nuestra comunidad de código abierto, pero también agradecemos las contribuciones esporádicas sobre los temas que le apasionan especialmente.

Ir a GitHub