Maison > interface Web > js tutoriel > Comment ajuster dynamiquement la hauteur d'un iFrame avec JavaScript ?

Comment ajuster dynamiquement la hauteur d'un iFrame avec JavaScript ?

Patricia Arquette
Libérer: 2024-12-31 01:32:09
original
336 Les gens l'ont consulté

How to Dynamically Adjust iFrame Height with JavaScript?

Utiliser JavaScript pour ajuster dynamiquement la hauteur de l'iFrame

Dans le but d'éliminer le besoin de barres de défilement et de créer un iframe réactif qui s'adapte à son contenu , pensez à utiliser la solution suivante :

Head Section Modification :

Introduisez le script suivant dans le fichier de votre page Web :

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
  }
</script>
Copier après la connexion

Modification iFrame :

Modifiez votre code iframe comme suit :

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
Copier après la connexion

Cette fonction JavaScript récupère la hauteur du document de contenu de l'iframe et définit la hauteur de l'iframe en conséquence. Lors du premier chargement de l'iframe ou lorsque son contenu change, la fonction resizeIframe est déclenchée, garantissant que la hauteur de l'iframe est toujours synchronisée avec son contenu.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal