web-dev-qa-db-fra.com

Comment définir la hauteur de l'iframe pour l'adapter au contenu?

J'essaie de supprimer la barre de défilement d'Iframe. Lorsque je règle manuellement la hauteur d'Iframe, cela fonctionne, mais la taille d'Iframe peut changer et je ne sais pas comment obtenir la hauteur d'Iframe lors du chargement de la page.

Existe-t-il un moyen de supprimer la barre de défilement et d’adapter le contenu Iframe?

<div class="portlet" id="pageContainer">
    <iframe id="frame" width="100%" frameborder="0" height="2000" scrolling="false" allowfullscreen="" src="/app/mytestapp" style="overflow: hidden"></iframe>
</div>

Lorsque j'essaie de ne pas fonctionner correctement, la hauteur n'est pas correcte. (Il retourne 2000px mais ma hauteur Iframe est presque 3000px)

$('iframe').load(function() {        
    this.contentWindow.document.body.offsetHeight + 'px';
});
javascriptjqueryhtmliframe
5
hellzone

Vous pouvez utiliser

$('iframe').load(function() {
    $('#frame').height($('#frame').get(0).contentWindow.document.body.offsetHeight + 'px');
})

ou  

$('iframe').load(function() {
    setTimeout(function(){
        $('#frame').height($('#frame').get(0).contentWindow.document.body.offsetHeight + 'px');
    }, 3000);
})
2
Super User

Utilisez ces paramètres pour supprimer la bordure et la barre de défilement

scrolling="no"
frameborder="no"

Et ce code pour définir la hauteur iframe

var width = $(window).width()
var height = $(window).height()

$('#frame').css({ width : width, height : height })

Si vous devez modifier dynamiquement la hauteur pour l'adapter à la taille de la fenêtre, encapsulez le code ci-dessus dans une fonction et utilisez-le sur l'événement resize à window, appelez également l'événement ready du document comme suit:

function iframeResize(){

    var width = $(window).width()
    var height = $(window).height()

    $('#frame').css({ width : width, height : height })
}

$(window).on('resize', iframeResize)
$(document).on('ready', iframeResize)

MIS &AGRAVE; JOUR

Vous devez également avoir des marges et des marges de remplissage sur une page parente d'iframe. Les valeurs par défaut entraînent des barres de défilement d'une page parente. Quelque chose comme ce sera une solution simple si vous n’avez pas besoin de transporter d’autres éléments d’une page sauf iframe.

* {
    margin: 0;
    padding: 0;
}
0
Panama Prophet