Maison >interface Web >js tutoriel >Comment ajuster la hauteur de l'iFrame au contenu sans barres de défilement ?

Comment ajuster la hauteur de l'iFrame au contenu sans barres de défilement ?

DDD
DDDoriginal
2024-11-17 11:10:02477parcourir

How to Adjust iFrame Height to Content Without Scrollbars?

Ajuster la hauteur de l'iFrame au contenu sans barres de défilement

Créer un iFrame qui ajuste sa hauteur de manière transparente pour afficher tout son contenu sans utiliser de barres de défilement peut être une tâche ardue. défi. Cependant, une solution existe grâce à l'utilisation de JavaScript.

Réponse :

Envisagez d'incorporer les éléments suivants :

  1. Ajoutez le script ci-dessous à votre section :
<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
  }
</script>
  1. Modifiez votre code iFrame pour inclure les éléments suivants :
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

Cet ajout de script et d'attribut redimensionne dynamiquement la hauteur de l'iFrame en fonction de la hauteur du contenu, éliminant le besoin de barres de défilement et garantissant une expérience visuelle optimale.

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!

Déclaration:
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