Comment redimensionner dynamiquement les Iframes pour une intégration transparente ?-tutoriel php-php.cn

Comment redimensionner dynamiquement les Iframes pour une intégration transparente ?

Patricia Arquette

Libérer： 2024-10-26 17:06:03

original

853 Les gens l'ont consulté

How to Dynamically Resize Iframes for Seamless Integration?

Redimensionnement dynamique de la hauteur d'un iframe pour une intégration transparente

Lors de l'intégration d'une page Web dans votre propre site Web à l'aide d'un iframe, vous souhaiterez souvent l'ajuster la hauteur de l'iframe de manière dynamique en fonction du contenu qu'elle contient, éliminant les barres de défilement inutiles pour un aspect plus propre.

Résoudre le problème

L'approche JavaScript conventionnelle de calcul de la hauteur du contenu déclenche une erreur « autorisation d’accès refusé ». Les options alternatives telles qu'Ajax et PHP ne parviennent pas non plus à résoudre ce défi.

La solution déclenchée par l'iframe

Une solution plus robuste consiste à exploiter un déclencheur de l'iframe élément body dans l’événement window.onload. Voici l'implémentation :

Dans le HTML de l'iframe :

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

Copier après la connexion

Dans le frame parent :

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

Copier après la connexion

Cette approche déclenche le redimensionnement une fois le contenu de l'iframe entièrement chargé , sans recourir à des méthodes sujettes aux erreurs. Pour améliorer l'expérience utilisateur, vous pouvez initialement masquer l'iframe et afficher une image de "chargement". Dès réception de l'appel resizeIframe, masquez l'image de chargement et affichez l'iframe, créant ainsi un effet "de type Ajax".

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!