Aplicaciones integradas receptivas y optimizadas para dispositivos móviles

Puedes añadir lógica a tu página web externa, haciendo que tu aplicación integrada responda a los cambios en el tamaño de la pantalla. Esto puede ser útil si utilizas dispositivos de pantalla pequeña, como teléfonos móviles, porque mitiga la necesidad de desplazarte varias veces para ver el contenido de la aplicación incrustada.

Si no añades esta lógica a tu página web, la inserción mantiene una altura estática y muestra una barra de desplazamiento.

Diseñar aplicaciones integradas receptivas y optimizadas para dispositivos móviles

1. Incluye en la lista de permisos las comunicaciones con tu dominio externo, añadiendo un parámetro adicional a tu inserción o iFrame existente: &target=https://mywebsite.com. El siguiente código muestra un ejemplo:

   <embed title="Embedded app" src="<PUBLIC-APP-URL>?el=VB&target=https://mywebsite.com">
   

2. Para que tu inserción sea consciente de las actualizaciones de tamaño, añade la siguiente lógica de JavaScript a la página web que aloja la aplicación integrada:
   Nota:

   Los valores específicos varían en función del diseño de tu aplicación.

   <script>  
   const MIN_HEIGHT = 800; // Minimum height of the app  
   var embed = document.querySelector('embed');  window.addEventListener('message', function(event) {  
   if (event.data.event === "APP_CONTENT_HEIGHT_UPDATED" && event.data.height) {  embed.style.height = Math.max(event.data.height, 800);  
   }  
   if (event.data.event === "APP_CONTENT_RESIZED" && event.data.height !== MIN_HEIGHT) {  
   if(event.data.height > 0) {  embed.style.height = Math.max(parseInt(event.data.height) - 10, 850);  
   }  
   }  
   }); 
   </script>
   

El script realiza las siguientes operaciones:

• Cuando se añade o elimina un control de la aplicación, el script desencadena el evento APP_CONTENT_HEIGHT_UPDATED y actualiza la altura de la variable embed.
  • El evento APP_CONTENT_HEIGHT_UPDATED desencadena APP_CONTENT_RESIZED, que reduce la altura de la variable embed en 10 píxeles.
    • El evento APP_CONTENT_RESIZED desencadena otro evento APP_CONTENT_RESIZED, que reduce de nuevo la altura de la variable embed en 10 píxeles.

El script repite estas operaciones, hasta que:

• La variable embed está a la altura mínima en la que no se requiere una barra de desplazamiento para ver la aplicación.
• La variable embed se reduce al valor inicial, que se especifica mediante MIN_HEIGHT.

Demo

Aplicación integrada receptiva y compatible con dispositivos móviles

Introducción

Esta página web incrusta una aplicación móvil dentro de un marco de dispositivo. La aplicación muestra el contenido de forma receptiva para el uso móvil. Un iFrame carga contenido de forma dinámica y lo muestra dentro del marco del dispositivo. El contenido de la aplicación ajusta su altura en función de su contenido, para evitar las barras de desplazamiento.

Aplicación integrada de demostración: pruébela usted mismo

Utilice los botones dentro del iFrame para interactuar con la aplicación y modificar el contenido: Usar aplicación de demostración en GitHub