recherche

Maison >développement back-end >tutoriel php >Comment redimensionner dynamiquement les Iframes pour une intégration transparente ?

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

Patricia Arquette
Patricia Arquetteoriginal
2024-10-26 17:06:03845parcourir

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>

Dans le frame parent :

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

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!

php JavaScript ajax html for Error using Event this display 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 calculer avec précision le nombre de mois entre deux dates en PHP ?Article suivant：Comment calculer avec précision le nombre de mois entre deux dates en PHP ?

Articles Liés

Voir plus