Maison > Article > développement back-end > Comment puis-je redimensionner dynamiquement une iframe pour l'adapter à son contenu ?

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

Barbara Streisandoriginal: 2024-10-26 19:44:02367parcourir

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>

<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!

php JavaScript ajax if for while using function default this display 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 accéder aux noms de nœuds XML avec des traits d’union en PHP ?Article suivant：Comment accéder aux noms de nœuds XML avec des traits d’union en PHP ?

Articles Liés

Voir plus