Applications intégrées réactives et mobiles

Vous pouvez ajouter une logique à votre page Web externe, ce qui rend votre application intégrée réactive aux modifications de la taille de l'écran. Cela peut être utile si vous utilisez des appareils à petit écran, tels que des téléphone portables, car cela vous évite de faire défiler plusieurs fois pour voir le contenu de l'application intégrée.

Si vous n’ajoutez pas cette logique à votre page Web, l’intégration conserve une hauteur statique et affiche une barre de défilement.

Concevoir des applications intégrées réactives et compatibles avec les appareils mobiles

1. Listez les communications avec votre domaine externe en ajoutant un paramètre supplémentaire à votre intégration ou iFrame existante : &target=https://mywebsite.com. Le code suivant montre un exemple :

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

2. Pour informer votre intégration des mises à jour de taille, ajoutez la logique JavaScript suivante à la page Web hébergeant l'application intégrée :
   Remarque :

   Les valeurs spécifiques varient en fonction de la conception de votre application.

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

Le script effectue les opérations suivantes :

• Lorsqu'une commande est ajoutée ou supprimée de l'application, le script déclenche l'événement APP_CONTENT_HEIGHT_UPDATED et met à jour la hauteur de la variable embed.
  • L'événement APP_CONTENT_HEIGHT_UPDATED déclenche APP_CONTENT_RESIZED, ce qui réduit la hauteur de la variable embed de 10 pixels.
    • L'événement APP_CONTENT_RESIZED déclenche un autre événement APP_CONTENT_RESIZED, qui réduit à nouveau la hauteur de la variable embed de 10 pixels.

Le script va répéter ces opérations jusqu'à :

• La variable embed est à la hauteur minimale où une barre de défilement n'est pas nécessaire pour afficher l'application.
• La variable embed est réduite à sa valeur initiale, qui est spécifiée par MIN_HEIGHT.

Démo

Application intégrée réactive et mobile

Introduction

Cette page Web intègre une application mobile dans le cadre d'un appareil. L'application affiche le contenu de manière réactive pour une utilisation mobile. Un iFrame charge le contenu dynamiquement et l'affiche à l'intérieur du cadre de l'appareil. Le contenu de l'application ajuste sa hauteur en fonction de son contenu, afin d'éviter les barres de défilement.

Application intégrée de démonstration – essayez-la vous-même

Utilisez les boutons à l'intérieur de l'iFrame pour interagir avec l'application et modifier le contenu.

Utiliser l’application de démonstration sur GitHub