Positionner le contenu d’une iframe

Positionner le contenu d'une iframe
Positionner le contenu d’une iframe

L’élément HTML <iframe> permet d’obtenir le contenu d’une page HTML de même origine ou d’origine extérieure, intégrée dans la page courante. Il convient d’indiquer la source src HTML à afficher et possède de nombreux attributs, en particulier la largeur et la hauteur. Ces deux attributs sont définis en pixels. Le javascript permet d’afficher une iframe responsive en recalculant la largeur et la hauteur en fonction du ratio. Un autre attribut est la possibilité de cacher les barres de défilement : scrolling="no" . L’élément accepte aussi les styles en ligne.

On peut vouloir n’afficher qu’une partie du contenu. Il faut donc positionner l’iframe à l’intérieur d’un élément auquel on appliquera la propriété CSS overflow: hidden; afin de cacher le reste de la page intégrée.

Paramètres à considérer pour positionner l'iframe
Paramètres à considérer pour positionner l’iframe

Voici une petite fonction javascript que l’on pourra appliquer pour positionner et n’afficher qu’une partie de la page. Cette fonction prend en argument la largeur et la hauteur de l’iframe, ainsi que la position top et left à partir du bord supérieur gauche de la page.

Il suffit ensuite d’appeler la fonction pour insérer l’iframe dans l’élément voulu :

Et hop, une petite fonction sympa pour positionner une iframe.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *