Comment ajuster automatiquement la hauteur de l'iFrame à la taille du contenu sans barre de défilement ?

Comment ajuster automatiquement la hauteur de l'iFrame à la taille du contenu sans barre de défilement

Lors de l'intégration d'un iframe dans votre site Web, vous pouvez rencontrer le besoin de son hauteur pour s'adapter dynamiquement au contenu qu'il affiche. En supprimant la barre de défilement, vous pouvez créer une expérience utilisateur transparente et esthétique. Cet article résout ce problème en proposant une solution qui ajuste automatiquement la hauteur de l'iframe, en fonction de la taille de son contenu.

Pour réaliser cet ajustement, suivez ces étapes :

1. Modification de la section principale :

   • Ajoutez le code JavaScript suivant dans la zone section de votre document.

   • <script>
       function resizeIframe(obj) {
         obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
       }

2. Modification iFrame :

   • Modifiez votre iframe pour inclure ce qui suit attributs :

La fonction JavaScript, resizeIframe, joue un rôle crucial dans cette solution. Il calcule la hauteur du document dans l'iframe et attribue cette valeur comme nouvelle hauteur de l'iframe, l'ajustant efficacement pour qu'elle corresponde à la taille du contenu. En supprimant la barre de défilement, l'iframe s'adapte parfaitement à son contenu sans compromettre l'expérience visuelle de l'utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!