IFRAMES permet aux développeurs Web de créer des sites Web à l’intérieur des sites Web. Par exemple, en ajoutant une simple balise IFRAME à votre page Web, vous pouvez montrer aux visiteurs de votre site une webcam en direct d’un autre site ou même une page de l’un de vos propres sites. Les IFRAMES n’ont pas de menus ou de boutons. Pour fermer un objet IFRAME, vous devez ajouter un bouton « Fermer » à votre page Web et créer un événement de fermeture pour masquer l’IFRAME.

Ouvrez Notepad ou votre éditeur HTML et créez un nouveau document.

Ajoutez ce code HTML au document :

Ce code crée un IFRAME et un bouton qui le ferme. La propriété « src » de l’IFRAME lui permet d’afficher le site Web de la Maison Blanche. Une balise « div » entoure la déclaration IFRAME. Notez que la balise « div » a une valeur ID de « DivIframe ». C’est une valeur importante. Le code JavaScript utilise cette valeur pour identifier l’IFRAME.

Ajoutez ce code JavaScript après la section « titre » du document :

Line one définit la variable « closeButton ». Dans cet exemple, la valeur de cette variable, « MyCloseButton », correspond à l’ID du bouton défini à l’étape précédente. Les lignes 2 à 3 créent une fonction nommée « SetupButton ». Cette fonction s’exécute lorsqu’un navigateur charge la page Web. Les lignes 4 à 8 créent un gestionnaire d’événements de clic. Ce gestionnaire d’événements appelle la fonction « closeIframe » lorsque vous cliquez sur le bouton au-dessus de l’IFRAME. Les lignes neuf à onze obtiennent une référence à l’objet « div » et le cachent.

Sauvegardez le document HTML. Ouvrez votre navigateur et chargez ce doublement. L’IFRAME contenant le site Web de la Maison Blanche apparaîtra sous le bouton « Fermer cette image ».

Cliquez sur le bouton. Le code JavaScript exécutera et fermera l’IFRAME.

Ressources intéressantes : 1, 2.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.