Maison > Article > développement back-end > Comment redimensionner dynamiquement la hauteur de l'iFrame et éliminer les barres de défilement ?

Comment redimensionner dynamiquement la hauteur de l'iFrame et éliminer les barres de défilement ?

Susan Sarandonoriginal: 2024-10-30 20:19:02493parcourir

How to Dynamically Resize iFrame Height and Eliminate Scrollbars?

Redimensionner dynamiquement la hauteur de l'iFrame pour éliminer les barres de défilement

En tant que développeur Web, vous pouvez rencontrer des situations dans lesquelles vous devez intégrer du contenu externe dans votre site Web. en utilisant une iframe. Cependant, gérer la hauteur d'une iframe pour éviter les barres de défilement et maintenir une expérience utilisateur fluide peut s'avérer difficile.

Malheureusement, comme le souligne la question référencée, le calcul de la hauteur du contenu dans une iframe à l'aide de JavaScript peut rencontrer des erreurs d'accès refusé. . De même, utiliser PHP ou Ajax pour récupérer ces informations n'est pas réalisable.

Pour relever ce défi, vous pouvez exploiter un déclencheur de la page intégrée pour communiquer sa hauteur à la fenêtre parent. Cette approche nécessite que la page source de l'iframe contienne une fonction de déclenchement qui définit la hauteur de l'iframe dans la fenêtre parent lors du chargement.

Voici une version modifiée du code fourni dans la question :

Code de la page intégrée :

<code class="html"><body onload="parent.resizeIframe(document.body.scrollHeight)"></code>

Code de la fenêtre parent :

<code class="html"><iframe src="..." id="blogIframe"></code>

<code class="javascript">function resizeIframe(newHeight) {
  document.getElementById("blogIframe").style.height = parseInt(newHeight, 10) + 10 + "px";
}</code>

Cette solution garantit que la hauteur de l'iframe est ajustée dynamiquement en fonction sur la hauteur du contenu sur la page intégrée. Cependant, il est important de considérer que la page intégrée doit exister sur le même domaine pour éviter les problèmes de communication d'origine croisée.

Si l'intégration entre domaines est nécessaire, envisagez d'utiliser un script PHP proxy ou d'intégrer le flux RSS de votre blog. directement sur votre site en utilisant PHP. Ces approches évitent les restrictions inter-domaines et permettent un ajustement transparent de la hauteur de l'iFrame.

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!

php JavaScript ajax if for using function this embedding Access iframe

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

Article précédent：Comment corriger l'erreur 419 POST dans les requêtes Ajax avec Laravel ?Article suivant：Comment corriger l'erreur 419 POST dans les requêtes Ajax avec Laravel ?

Articles Liés

Voir plus