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

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

Barbara Streisand

Libérer： 2024-10-26 19:44:02

original

449 Les gens l'ont consulté

How Can I Dynamically Resize an Iframe to Fit Its Content?

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"><body onload='parent.resizeIframe(document.body.scrollHeight)'></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

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!