<iframe> - Comment afficher toute la hauteur de la page référencée ?

StackOverflow https://stackoverflow.com/questions/58543

  •  09-06-2019
  •  | 
  •  

Question

J'ai une application que j'aimerais intégrer dans le CMS de notre entreprise.La seule façon de faire cela (on me dit) est de le charger dans un <iframe>.

Facile:il suffit de régler height et width à 100%!Sauf que ça ne marche pas.

J'ai découvert le réglage frameborder à 0, donc au moins regards comme une partie du site, mais je préférerais ne pas avoir une barre de défilement laide à l'intérieur une page qui en a déjà un.

Connaissez-vous des astuces pour y parvenir ?

MODIFIER: Je pense que je dois clarifier quelque peu ma question :

  • la société CMS affiche les trucs et astuces pour l'ensemble de notre site Web
  • la plupart des pages créées via le CMS
  • ma candidature ne l'est pas, mais ils me laisseront l'intégrer dans un <iframe>
  • Je n'ai aucun contrôle sur le iframe, donc toute solution doit fonctionner à partir de la page référencée (selon le src attribut du iframe étiqueter)
  • le CMS affiche un pied de page, donc régler la hauteur à 1 million de pixels n'est pas une bonne idée

Puis-je accéder aux pages parents DOM depuis la page référencée ?Cela pourrait aider, mais je peux voir que certaines personnes pourraient ne pas vouloir que cela soit possible...

Cette technique semble fonctionner (glané provenant de plusieurs sources, mais inspiré par le lien de la réponse acceptée:

Dans le document parent :

<iframe id="MyIFRAME" name="MyIFRAME" 
    src="http://localhost/child.html"
    scrolling="auto" width="100%" frameborder="0">
    no iframes supported...
</iframe>

Chez l'enfant :

<!-- ... -->
<body>
<script type="text/javascript">
    function resizeIframe() {

        var docHeight;
        if (typeof document.height != 'undefined') {
            docHeight = document.height;
        }
        else if (document.compatMode && document.compatMode != 'BackCompat') {
            docHeight = document.documentElement.scrollHeight;
        }
        else if (document.body 
            && typeof document.body.scrollHeight != 'undefined') {
            docHeight = document.body.scrollHeight;
        }

        // magic number: suppress generation of scrollbars...
        docHeight += 20;

        parent.document.getElementById('MyIFRAME').style.height = docHeight + "px";    
    }
    parent.document.getElementById('MyIFRAME').onload = resizeIframe;
    parent.window.onresize = resizeIframe;
</script>               
</body>

D'AILLEURS: Cela ne fonctionnera que si le parent et l'enfant sont dans le même domaine en raison d'une restriction JavaScript pour des raisons de sécurité...

Était-ce utile?

La solution

Vous pouvez soit simplement utiliser un langage de script pour inclure la page dans la page parent, sinon vous souhaiterez peut-être essayer l'une de ces méthodes javascript :

http://brondsema.net/blog/index.php/2007/06/06/100_height_iframe http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_22840093.html

Autres conseils

À condition que votre iframe soit hébergée sur le même serveur que la page qui la contient, vous pouvez accédez-y via javascript.

Il existe un certain nombre de méthodes suggérées pour définir l'iframe sur toute la hauteur du contenu, chacun avec différents degrés de succès - un google pour ce problème montre qu'il s'agit d'un problème assez courant, sans véritable solution consensuelle unique, j'en ai peur !

Plusieurs personnes ont rapporté que ce scénario fait l'affaire, mais peut-être besoin quelques modifications pour votre cas spécifique (encore une fois, en supposant que votre iframe et votre page parent se trouvent sur le même domaine).

Il me manque peut-être quelque chose ici, mais en ajoutant scrolling=no comme attribut du iframe La balise supprime normalement les barres de défilement.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top