Faire en sorte qu'une iframe occupe un espace vertical

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

  •  09-06-2019
  •  | 
  •  

Question

j'aimerais avoir un iframe prendre autant d'espace vertical que nécessaire pour afficher son contenu et ne pas afficher de barre de défilement.Est-ce vraiment possible ?

Existe-t-il des solutions de contournement ?

Était-ce utile?

La solution

Cela devrait définir le IFRAME hauteur à la hauteur de son contenu :

<script type="text/javascript">
the_height = document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;
document.getElementById('the_iframe').height = the_height;
</script>

Vous voudrez peut-être ajouter scrolling="no" à ton IFRAME pour désactiver les barres de défilement.

modifier: Oups, j'ai oublié de déclarer the_height.

Autres conseils

La solution de contournement consiste à ne pas utiliser <iframe> et prétraiter le code côté serveur.

Cet extrait CSS devrait supprimer la barre de défilement verticale :

body {
  overflow-x: hidden;
  overflow-y: hidden;
}

Je ne suis pas encore sûr qu'il occupe autant d'espace vertical que nécessaire, mais je verrai si je n'arrive pas à le comprendre.

Ajout d'un DOCTYPE déclaration au IFRAME le document source aidera à calculer la valeur correcte à partir de la ligne

document.getElementById('the_iframe').contentWindow.document.body.scrollHeight

voir W3C DOCTYPE pour exemples

J'avais des problèmes avec IE et FF car ils rendaient le iframe document en mode « bizarreries », jusqu'à ce que j'ajoute le DOCTYPE.

Prise en charge de FF/IE/Chrome :Le .scrollHeight ne fonctionne pas avec Chrome, j'ai donc trouvé un exemple javascript utilisant jQuery pour tout définir IFRAME hauteurs sur une page en fonction du contenu des iframes.NOTE:Ceci concerne les pages de référence de votre domaine actuel.

<script type="text/javascript">
    $(document).ready(function(){
        $('iframe').each(function(){
            var context = $(this);
            context.load(function(event){ // attach the onload event to the iframe  
                var body = $(this.contentWindow.document).find('body');
                if (body.length > 0 && $(body).find('*').length > 0) { // check if iframe has contents
                    context.height($(body.get(0)).height() + 20);
                } else {
                    context.hide(); // hide iframes with no contents
                }
            });
        });
    });
</script>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top