apps

2023.10

false

Importante :

Este contenido se ha localizado parcialmente a partir de un sistema de traducción automática. La localización de contenidos recién publicados puede tardar entre una y dos semanas en estar disponible.

Guía del usuario de Apps

ENTREGA:

Última actualización 13 de feb. de 2025

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

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

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.