简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  développement back-end  >  Comment redimensionner dynamiquement des Iframes sans Ajax ni PHP ?

Comment redimensionner dynamiquement des Iframes sans Ajax ni PHP ?

Linda Hamilton
Linda Hamiltonoriginal
2024-10-27 02:10:02689parcourir

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)'>

É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';
}

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!

php JavaScript ajax define for using function default this embedding 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：Les modèles de transition basés sur les caractères peuvent-ils détecter les requêtes de recherche charabia ?Article suivant：Les modèles de transition basés sur les caractères peuvent-ils détecter les requêtes de recherche charabia ?

Articles Liés

Voir plus