Comment redimensionner dynamiquement la hauteur de l'iFrame et éliminer les barres de défilement ?-tutoriel php-php.cn

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

Susan Sarandon

Libérer： 2024-10-30 20:19:02

original

538 Les gens l'ont consulté

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>

Copier après la connexion

Code de la fenêtre parent :

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

Copier après la connexion

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

Copier après la connexion

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!