webentwicklung-frage-antwort-db.com.de

jquery erhält beim Laden die Höhe des iframe-Inhalts

Ich habe eine Hilfeseite, help.php, die ich in einen iframe in main.php.__ lade. Wie kann ich die Höhe dieser Seite nach dem Laden im iframe ermitteln?

Ich frage das, weil ich die Höhe von iframe nicht auf 100% oder automatisch einstellen kann. Deshalb denke ich, ich muss Javascript verwenden ... ... Ich verwende jQuery

CSS:

body {
    margin: 0;
    padding: 0;
}
.container {
    width: 900px;
    height: 100%;
    margin: 0 auto;
    background: silver;
}
.help-div {
    display: none;
    width: 850px;
    height: 100%;
    position: absolute;
    top: 100px;
    background: orange;
}
#help-frame {
    width: 100%;
    height: auto;
    margin:0;
    padding:0;
}

JS:

$(document).ready(function () {
    $("a.open-help").click(function () {
        $(".help-div").show();
        return false;
    })
})

HTML:

<div class='container'>
    <!-- -->
    <div class='help-div'>
        <p>This is a div with an iframe loading the help page</p>
        <iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe>
    </div>  <a class="open-help" href="#">open Help in iFrame</a>

    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
</div>
70
FFish

ok endlich fand ich eine gute lösung:

$('iframe').load(function() {
    this.style.height =
    this.contentWindow.document.body.offsetHeight + 'px';
});

Da einige Browser (ältere Safari- und Opera-Versionen) melden, dass abgeschlossene Ladevorgänge abgeschlossen sind, bevor CSS-Renderings ausgeführt werden, müssen Sie ein Micro-Timeout festlegen und die src des iframe löschen und neu zuweisen. 

$('iframe').load(function() {
    setTimeout(iResize, 50);
    // Safari and Opera need a kick-start.
    var iSource = document.getElementById('your-iframe-id').src;
    document.getElementById('your-iframe-id').src = '';
    document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
    document.getElementById('your-iframe-id').style.height = 
    document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';
}
94
FFish

Die weniger komplizierte Antwort lautet .contents(), um an den iframe zu gelangen. Interessanterweise gibt es jedoch einen anderen Wert zurück als ich, wenn ich den Code in meiner ursprünglichen Antwort verwende, aufgrund der Polsterung des Körpers, glaube ich. 

$('iframe').contents().height() + 'is the height'

So habe ich es für die domänenübergreifende Kommunikation gemacht. Ich befürchte, das ist vielleicht unnötig kompliziert. Zuerst würde ich jQuery in das iFrame-Dokument einfügen. Dies verbraucht zwar mehr Speicher, erhöht jedoch nicht die Ladezeit, da das Skript nur einmal geladen werden muss. 

Verwenden Sie die jQuery des iFrame, um die Körpergröße Ihres iFrames so früh wie möglich zu messen (onDOMReady), und stellen Sie dann den URL-Hash auf diese Höhe ein. Fügen Sie dem iFrame-Tag im übergeordneten Dokument ein onload -Ereignis hinzu, das die Position des iframe überprüft und den gewünschten Wert extrahiert. Da onDOMReady immer vor dem Ladeereignis des Dokuments auftritt, können Sie ziemlich sicher sein, dass der Wert korrekt kommuniziert wird, ohne dass die Racebedingung die Dinge kompliziert.

Mit anderen Worten:

... in der Help.php:

var getDocumentHeight = function() {
    if (location.hash === '') { // EDIT: this should prevent the retriggering of onDOMReady
        location.hash = $('body').height(); 
        // at this point the document address will be something like help.php#1552
    }
};
$(getDocumentHeight);

... und im übergeordneten Dokument:

var getIFrameHeight = function() {
    var iFrame = $('iframe')[0]; // this will return the DOM element
    var strHash = iFrame.contentDocument.location.hash;
    alert(strHash); // will return something like '#1552'
};
$('iframe').bind('load', getIFrameHeight );
44
Andrew

Ich habe folgendes gefunden, um auf Chrome, Firefox und IE11 zu funktionieren:

$('iframe').load(function () {
    $('iframe').height($('iframe').contents().height());
});

Wenn der Inhalt der Iframes abgeschlossen ist, wird das Ereignis ausgelöst und die IFrames-Höhe wird auf die Höhe des Inhalts eingestellt. Dies funktioniert nur für Seiten in derselben Domäne wie die des IFrame.

19

Der Code dafür ohne jQuery ist heutzutage trivial:

const frame = document.querySelector('iframe')
function syncHeight() {
  this.style.height = `${this.contentWindow.document.body.offsetHeight}px`
}
frame.addEventListener('load', syncHeight)

So lösen Sie die Veranstaltung aus:

frame.removeEventListener('load', syncHeight)
5
cchamberlain

Sie brauchen dazu keine Jquery im iframe, aber ich verwende es, da der Code so viel einfacher ist ...

Fügen Sie dies in das Dokument in Ihren iframe ein.

$(document).ready(function() {
  parent.set_size(this.body.offsetHeight + 5 + "px");  
});

fünf oben hinzugefügt, um die Bildlaufleiste in kleinen Fenstern zu eliminieren, die Größe ist nie perfekt.

Und dies in Ihrem übergeordneten Dokument.

function set_size(ht)
{
$("#iframeId").css('height',ht);
}
5
RkaneKnight

ein einfacher Einzeiler beginnt mit einer Standard-Mindesthöhe und vergrößert den Inhalt.

<iframe src="http://url.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>
2
Pixelomo

Die Funktion $('iframe').load der akzeptierten Antwort erzeugt nun a.indexOf is not a function Error. Kann aktualisiert werden auf:

$('iframe').on('load', function() {
  // ...
});

Nur wenige andere ähnlich wie .load veraltet seit jQuery 1.8: Fehler "Nicht erfasster TypeError: a.indexOf ist keine Funktion" beim Öffnen eines neuen Foundation-Projekts

2
Ryan J. Stout

dies ist die richtige Antwort, die für mich funktioniert hat

$(document).ready(function () {
        function resizeIframe() {
            if ($('iframe').contents().find('html').height() > 100) {
                $('iframe').height(($('iframe').contents().find('html').height()) + 'px')
            } else {
                setTimeout(function (e) {
                    resizeIframe();
                }, 50);
            }
        }
        resizeIframe();
    });
1
Javier Gordo