Thunkable FR
  • 👋 Bienvenue dans Thunkable
  • 👶Pour Commencer
    • S'inscrire
    • Votre page de projets Thunkable
    • Tutoriels
    • L'application Thunkable Live
  • 🆕Créer un nouveau projet
    • Modifier les paramètres du projet
    • Actifs et taille des projets
    • Exemples de projets Thunkable
    • Galerie publique des projets
  • 🛠️ Composants
    • 🔘Interface Utilisateur
      • Button (Bouton)
      • Label (Etiquette)
      • Text Input (Saisie de texte)
      • List Viewer (Visionneuse de liste) (relecture en cours)
      • Web Viewer (Visionneuse Web)
      • Switch (commutateur)
      • Slider (curseur)
      • Alert (Alerte)
      • Loading Icon (Chargement de l'icône)
      • Date Input (Saisie de la date)
      • Time Input (Saisie du temps)
      • PDF Reader (Lecteur de PDF)
      • Rating (Classement)
      • 📊Data Viewers (Visualiseurs de données)
        • Data Viewer List (Liste de visualisation de données)
        • Data Viewer Grid (Grille de visualisation des données)
        • Custom Data Viewer Layout (Disposition personnalisée du visualiseur de données)
    • 📐Mise en page
      • Top Tab Navigator (Onglet supérieur Navigateur)
      • Bottom Tab Navigator (Onglet de navigation inférieur)
      • Stack Navigator (Navigateur à pile)
      • Drawer Navigator (Navigateur à tiroir)
      • Screen (Ecran)
      • Row (Ligne)
      • Column (Colonne)
    • 🔊Voix
      • Sound (Son)
      • Audio Recorder (Enregistreur Audio)
      • Text to Speech (Texte au discours)
      • Speech Recognizer (Reconnaissance de discours)
      • Assistant by Dialogflow (Assistant par Dialogflow)
      • Translator by Yandex (Traducteur par Yandex)
    • 📷 Image
      • Image
      • Photo Library (Photothèque)
      • Camera (Appareil photo)
      • Barcode Scanner (Lecteur de codes-barres)
      • Image Recognizer (Reconnaissance d'image)
      • Animation by Lottie (Animation par Lottie)
      • Video (Vidéo)
      • Video Recorder (Enregistreur vidéo)
    • 🗄️ Stockage des Données
      • Local Storage (Stockage local)
      • LocalDB (base de données locale)
      • Airtable
      • Media DB par Cloudinary
      • RealtimeDB par Firebase
      • Web API (API Web)
      • Smart Contract by Oasis (Contrat intelligent par Oasis)
      • Blockchain Wallet by Oasis (Portefeuille Blockchain par Oasis)
    • 🌍Localisation
      • Maps By Google and Apple (Cartes de Google et Apple)
      • Location Sensor (Capteur de localisation)
    • ⏲️ Capteurs
      • Timer
      • Accéléromètre
      • Gyroscope
      • Magnétomètre
      • Bluetooth Low Energie
    • ✉️ Authentification
      • Email Sign In by Firebase (Connexion au courrier électronique par Firebase)
    • 🤝Social
      • Share (Partager)
      • Notifications Push par One Signal
    • 💲Monétisation
      • Ads by Admob (Annonces par AdMob)
    • 🎮Gaming
      • Canvas (toile)
      • Sprites
      • Canvas Label
  • 🤖Blocs
    • Control (Contrôle)
    • Logic (Logique)
    • Math
    • Text (Texte)
    • Lists (Listes)
    • Color (Couleur)
    • Objects (Objets)
    • Device (Appareil)
    • Variables
    • Functions (Fonctions)
    • "Any Component" Blocks (Blocs "Généraliste")
    • Data Sources
    • 🤖🎮Gaming Blocks (en cours)
      • Events (événements)
      • Motion (Mouvement)
      • Looks (Apparence)
      • Direction
      • Sensing (Détection)
      • Add & Remove (Ajouter et Supprimer)
      • Stage (Scène)
      • Canvas Label (Etiquette de la Toile)
  • Post-Developpement
    • 🖥️ Emulateurs et test de l'application (en cours)
    • 🔒Confidentialité des données de l'application
    • 🔗Blockchain & Data Privacy
    • ➕Faire une Copie
    • 📥Téléchargement
    • 📤Partager
    • 📱Publication
      • Publier dans l'App Store (iOS)
      • Publier sur Play Store (Android)
      • Publier en tant qu'application Web (PRO)
    • Générer des captures d'écran
    • 🔎Résolution des problèmes
      • Problèmes de connexion
      • FAQs
    • 📏Introduction à l'espacement
    • 🖼️ Introduction au dimensionnement
    • 🔤Polices
    • 💾Gérer le stockage
    • 📝Bugs et demandes de fonctionnalités
  • Non-Officiel (à faire)
    • Google, Facebook and Github Sign In/Up (à faire)
    • 4 Keys To Designing A Great Mobile App
Powered by GitBook
On this page
  • Video Tutorielle
  • Vue d'ensemble
  • Définir l'URL
  • Retour en arrière/avance
  • Modifier la taille du composant Web Viewer
  • Ajouter un espacement
  • Gérer les autorisations
  • Envoyer un message / Recevoir un message
  • Voir aussi

Was this helpful?

  1. 🛠️ Composants
  2. Interface Utilisateur

Web Viewer (Visionneuse Web)

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

PreviousList Viewer (Visionneuse de liste) (relecture en cours)NextSwitch (commutateur)

Last updated 4 years ago

Was this helpful?

Video Tutorielle

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

Vue d'ensemble

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.

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.

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.

Voir aussi

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

Onglet avancé du composant Web Viewer
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 .

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

🔘
testez
téléchargées
ici
Web API
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
tester
télécharger