Web Viewer (Visionneuse Web)

Avec le composant Web Viewer, vous pouvez ouvrir n'importe quel site web dans votre application pour l'afficher.

Video Tutorielle

Certains sites web peuvent ne pas apparaître lorsque vous testez votre application sur le web. Vous devrez peut-être tester l'application en direct sur un appareil, ou télécharger et installer l'application, pour voir votre page web.

Vue d'ensemble

• Définir l'URL

• Modifier la taille du composant Web Viewer

• Ajouter un espacement

• Gérer les autorisations

• Envoyer un message / Recevoir un message

• Voir Aussi

Définir l'URL

Pour ouvrir un site web dans votre application, vous devez fournir une URL au composant Web Viewer.

Une URL est un peu comme une adresse de rue - elle indique à l'internaute l'emplacement du site web sur Internet.

• URL: Saisissez le lien vers le site web ou une image. L'URL doit comprendre https://

Note: Peut également accepter les fichiers .html qui ont été téléchargés dans l'application (idéal pour une utilisation hors ligne).

Retour en arrière/avance

Vous pouvez utiliser des blocs pour revenir aux pages Web visitées précédemment. Une fois que vous êtes revenu en arrière, vous pouvez également utiliser des blocs pour naviguer à nouveau vers les pages visitées.

Le bloc arrière peut ne pas fonctionner lorsque vous testez votre application sur le web, mais il fonctionnera lorsque vous testez votre application en direct et dans les applications téléchargées

Modifier la taille du composant Web Viewer

Vous pouvez définir la hauteur du composant Web Viewer à l'aide de la propriété Height et sa largeur à l'aide de la propriété Width.

Height

• Fill container - Le composant Web Viewer remplit tout l'écran verticalement

• Fit contents - La hauteur du composant Web Viewer change en fonction du contenu qu'il contient

• Relative size - Le composant Web Viewer remplit le pourcentage spécifié de l'écran

• Absolute size - Dimensionne le composant Web Viewer en fonction d'un nombre déterminé de pixels

Width

• Fill container - Le composant Web Viewer remplit tout l'écran horizontalement

• Fit contents - La largeur du composant Web Viewer change pour s'adapter au contenu qu'il contient

• Relative size - Le composant Web Viewer remplit le pourcentage spécifié de l'écran

• Absolute - Dimensionne le composant Web Viewer en fonction d'un nombre déterminé de pixels

Ajouter un espacement

Vous modifiez l'espacement et le positionnement du composant Web Viewer avec les propriétés Margin (Marge) et Padding (Remplissage).

Margin

• Vous pouvez spécifier l'espace que vous souhaitez entre la bordure et le contenu du composant Web Viewer en utilisant des valeurs en pixels ou en pourcentage.

Padding

• Vous pouvez spécifier l'espace que vous souhaitez entre les bords du composant Web Viewer et l'écran en utilisant des valeurs en pixels ou en pourcentage.

Gérer les autorisations

Vous pouvez choisir si le composant Web Viewer demande automatiquement la localisation de l'utilisateur. Certains sites web nécessitent l'accès à la localisation de l'utilisateur pour fonctionner. Toutefois, si vous ne prévoyez pas d'afficher un site web qui nécessite cette autorisation dans votre application, vous ne voudrez peut-être pas que votre application demande une autorisation inutile.

Pour déterminer si le composant Web Viewer demande ou non la localisation de l'utilisateur, allez dans l'onglet Design et cliquez sur votre composant Web Viewer. Dans le panneau situé à droite de l'écran, cliquez sur l'onglet Advanced.

Onglet avancé du composant Web Viewer

Faites défiler la page vers le bas jusqu'à ce que vous voyiez un bouton intitulé "Geolocation Enabled". Utilisez ce bouton pour déterminer si votre composant Web Viewer demande la localisation de l'utilisateur.

Envoyer un message / Recevoir un message

Si vous êtes le propriétaire du site web affiché dans votre composant Web Viewer, vous pouvez envoyer et recevoir des messages entre votre site web et le Web Viewer en utilisant Javascript.

Exemple de bloc "Post Message" du composant Web Viewer

Exemple de bloc "Recevoir un message" dans le composant Web Viewer

Vous pouvez voir des exemples d'envoi/réception de messages et obtenir des instructions de configuration supplémentaires ici.

Voir aussi

Vous pouvez également trouver le composant Web API utile pour envoyer/recevoir des informations entre votre application et un site web.