Maison > interface Web > js tutoriel > le corps du texte

Comment ajuster automatiquement la hauteur de l'iFrame en fonction du contenu ?

Linda Hamilton
Libérer: 2024-11-20 01:42:02
original
872 Les gens l'ont consulté

How to Automatically Adjust iFrame Height Based on Content?

Ajustement automatique de la hauteur de l'iFrame en fonction du contenu

Dans le développement Web, les iFrames sont utilisés pour intégrer du contenu externe dans une page Web. Un problème qui se pose souvent avec les iFrames est que leur hauteur ne s'ajuste pas dynamiquement en fonction du contenu qu'ils contiennent. Cela peut entraîner des barres de défilement disgracieuses ou des apparences visuelles gênantes.

Question :

Comment puis-je faire en sorte qu'un iFrame ajuste automatiquement sa hauteur en fonction de son contenu, sans utiliser de barre de défilement ?

Réponse :

Pour obtenir la fonctionnalité souhaitée, suivez ces étapes :

  1. Ajouter un script à la Section :

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

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

En incorporant ce script et en modifiant le code iFrame, l'iFrame ajustera dynamiquement sa hauteur pour s'adapter au contenu qu'il contient, sans avoir besoin de barres de défilement.

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