Comment puis-je redimensionner dynamiquement une iframe pour l'adapter à son contenu ?

Redimensionner dynamiquement la hauteur de l'iframe en fonction du contenu

Question :

En incorporant une iframe dans un site Web, l'objectif est de déterminer dynamiquement la hauteur appropriée pour l’iframe. Idéalement, l'iframe devrait s'adapter au contenu qu'elle affiche sans barres de défilement, ressemblant à une intégration transparente au sein du site Web.

Réponse :

Lors de la tentative initiale de JavaScript pour calculer la hauteur, les autorisations d'accès refusées ont entravé la progression. . Par la suite, des réflexions ont été faites pour utiliser Ajax ou PHP.

Cependant, la solution réside dans l'utilisation d'un déclencheur de la page iframe dans window.onload pour communiquer la hauteur du corps à la page parent. Le parent ajuste ensuite la hauteur de l'iframe en conséquence.

<code class="html">&lt;body onload='parent.resizeIframe(document.body.scrollHeight)'&gt;</code>

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

Bien que l'iframe puisse initialement apparaître avec une hauteur par défaut, cela peut être atténué en affichant initialement une image de chargement et en masquant l'iframe. Une fois que la fonction resizeIframe reçoit la mise à jour de la hauteur, elle peut supprimer l'image de chargement et afficher l'iframe, simulant une expérience de type Ajax.

Alternativement, si des limitations inter-domaines surviennent, un script PHP proxy pourrait faciliter l'intégration. Cependant, pour un maximum de contrôle et une facilité de mise en œuvre, embarquer directement le flux RSS du blog via PHP offre une solution viable.

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!