it-swarm.com.de

Wie stelle ich die Iframe-Höhe so ein, dass sie zum Inhalt passt?

Ich versuche, die Bildlaufleiste von Iframe zu entfernen. Wenn ich die Höhe von Iframe manuell einstelle, funktioniert dies, aber die Iframe-Größe kann sich ändern, und ich weiß nicht, wie ich die Iframe-Höhe beim Laden der Seite ermitteln kann.

Gibt es eine Möglichkeit, die Bildlaufleiste zu entfernen und Iframe-Inhalte anzupassen?

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

Wenn ich versuche, unten zu arbeiten, gibt es nicht die richtige Höhe zurück. (Es gibt 2000px zurück, aber meine IFrame-Höhe beträgt fast 3000px.)

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

Sie können verwenden

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

oder  

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

Verwenden Sie diese Parameter, um den Rand und die Bildlaufleiste zu entfernen

scrolling="no"
frameborder="no"

Und dieser Code für die Einstellung der iframe-Höhe

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

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

Wenn Sie die Höhe dynamisch an die Fenstergröße anpassen müssen, wickeln Sie den obigen Code in function ein und verwenden Sie ihn bei resize-Ereignis bei window. Rufen Sie außerdem das ready-Ereignis des Dokuments wie folgt auf:

function iframeResize(){

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

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

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

AKTUALISIERT

Außerdem müssen Sie den Rand und die Auffüllung auf einer übergeordneten Seite von iframe mitführen. Standardwerte bewirken Bildlaufleisten einer übergeordneten Seite. So etwas ist eine einfache Lösung, wenn Sie außer iframe kein anderes Element auf einer Seite mitführen müssen.

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