


Comment puis-je redimensionner dynamiquement une iframe pour l'adapter à son contenu ?
Oct 26, 2024 pm 07:44 PMRedimensionner 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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

11 meilleurs scripts de raccourcissement d'URL PHP (gratuit et premium)

Travailler avec les données de session Flash dans Laravel

Misque de réponse HTTP simplifié dans les tests Laravel

Curl dans PHP: Comment utiliser l'extension PHP Curl dans les API REST

Construisez une application React avec un Laravel Back End: Partie 2, React

12 meilleurs scripts de chat PHP sur Codecanyon
