Comment redimensionner dynamiquement des Iframes sans Ajax ni PHP ?-tutoriel php-php.cn

Comment redimensionner dynamiquement des Iframes sans Ajax ni PHP ?

Linda Hamilton

Libérer： 2024-10-27 02:10:02

original

687 Les gens l'ont consulté

How to Dynamically Resize Iframes Without Ajax or PHP?

Redimensionnement dynamique d'une iframe : surmonter les contraintes de hauteur

Lors de l'intégration de contenu externe dans une iframe, il est crucial d'ajuster la hauteur de manière dynamique pour éliminer les barres de défilement inutiles . Pour éviter les problèmes d'accessibilité et maintenir une expérience transparente sur une seule page, nous explorerons des options au-delà d'Ajax ou de PHP.

Solution : communication inter-domaines avec JavaScript

Malheureusement , Ajax et PHP échouent dans ce scénario en raison de restrictions inter-domaines. Au lieu de cela, nous utiliserons JavaScript pour lancer une interaction inter-domaines entre le contenu de l'iframe et la page parent.

Étape 1 : Déclenchez le calcul de la hauteur à partir de la page iframe

Injectez ce code dans le corps de l'iframe :
```
<body onload='parent.resizeIframe(document.body.scrollHeight)'>
```
Copier après la connexion

Étape 2 : Redimensionner la fonction dans la page parent

Dans le JavaScript de la page parent, définissez une fonction pour ajuster la hauteur de l'iframe :

function resizeIframe(newHeight)
{
  document.getElementById('blogIframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}

Copier après la connexion

Gestion de la hauteur initiale et du chargement

Initialement, l'iframe aura une hauteur par défaut.
Ajoutez une image de chargement visible au début et masquez-la lorsque la fonction resizeIframe s'exécute.
Cela crée l'illusion de redimensionnement dynamique.

Limitations et considérations

La solution fonctionne dans le même domaine. Pour l'intégration entre domaines, envisagez d'utiliser un script proxy PHP ou d'intégrer directement le flux RSS du blog.

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!