Comment redimensionner dynamiquement un iFrame pour qu'il corresponde à la hauteur de son contenu ?

Redimensionner la hauteur de l'iFrame pour correspondre dynamiquement à la hauteur du contenu

Question : Comment puis-je définir dynamiquement la hauteur d'une iframe pour correspondre à la hauteur de son contenu, éliminant ainsi le besoin d'une barre de défilement ?

Réponse :

Bien que les méthodes JavaScript traditionnelles puissent rencontrer des erreurs d'accès refusé, une solution impliquant une communication directe entre l'iFrame et sa page parent peut être utilisé.

Mise en œuvre :

1. Déclencheur à partir de la page iFrame :

   • Dans le corps de la page iFrame, ajoutez un déclencheur onload qui transmet la hauteur du corps à la page parent à l'aide de window.onload.

2. Redimensionner Fonction dans la page parent :

   • Dans la page parent, créez une fonction JavaScript appelée resizeIframe qui prend la nouvelle hauteur comme argument.
   • Ajustez la hauteur de l'iframe à correspondre à la nouvelle hauteur, en ajoutant un léger décalage pour s'adapter à tout rembourrage ou élément extérieur au corps.

3. Intégration :

   •  Masquez initialement l'iFrame et affichez une image de chargement.
   • Lorsque la fonction resizeIframe est exécutée, masquez l'image de chargement et affichez l'iFrame pour une apparence transparente.

Limitations :

Cette méthode repose sur une communication de même domaine. Si l'iFrame provient d'un autre domaine, un script PHP proxy ou une intégration directe du flux RSS du blog dans la page parent peut être nécessaire.

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!