Ich habe eine Hilfeseite, help.php, die ich in einen Iframe in main.php lade. Wie kann ich die Höhe dieser Seite ermitteln, nachdem sie in den Iframe geladen wurde?
Ich frage dies, weil ich die Höhe von iframe nicht auf 100% oder auto stylen kann. Deshalb denke ich, dass ich Javascript verwenden muss. 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>
Antworten:
ok ich habe endlich eine gute lösung gefunden:
$('iframe').load(function() { this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; });
Da einige Browser (ältere Safari und Opera) den Onload-Vorgang vor dem Rendern von CSS als abgeschlossen melden, müssen Sie ein Micro-Timeout festlegen und den src des Iframes ausblenden 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'; }
quelle
real
Größe die Größe erhältdocument
Höhe, nicht diebody
Höhe. Mit jQuery können Sie es greifen$(this.contentWindow.document).height()
.Die weniger komplizierte Antwort ist, um
.contents()
zum Iframe zu gelangen. Interessanterweise gibt es jedoch einen anderen Wert als den, den ich mit dem Code in meiner ursprünglichen Antwort erhalte, aufgrund der Polsterung am Körper, glaube ich.$('iframe').contents().height() + 'is the height'
So habe ich es für die domänenübergreifende Kommunikation gemacht, daher befürchte ich, dass es möglicherweise unnötig kompliziert ist. Zuerst würde ich jQuery in das Dokument des iFrame einfügen. Dies verbraucht mehr Speicher, sollte jedoch die Ladezeit nicht verlängern, da das Skript nur einmal geladen werden muss.
Verwenden Sie die jQuery des iFrame, um die Höhe des Körpers Ihres Iframes so früh wie möglich zu messen (onDOMReady), und setzen Sie dann den URL-Hash auf diese Höhe.
onload
Fügen Sie im übergeordneten Dokument dem iFrame-Tag ein Ereignis hinzu, das die Position des Iframes ü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 eine Race-Bedingung die Dinge kompliziert.Mit anderen Worten:
... in 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 );
quelle
<iframe src="../Help.php#introduction" />
) ladensleep(5)
Einfügen eines in Ihre Help.php auch eine gute Möglichkeit sein, um alle Rennbedingungen zu testen. Wenn der IframeonLoad
vorher irgendwie feuertonDOMReady
, sollte er hier auftauchen.Ich habe festgestellt, dass Folgendes für Chrome, Firefox und IE11 funktioniert:
$('iframe').load(function () { $('iframe').height($('iframe').contents().height()); });
Wenn der Iframes-Inhalt geladen ist, wird das Ereignis ausgelöst und die IFrames-Höhe auf die des Inhalts festgelegt. Dies funktioniert nur für Seiten innerhalb derselben Domäne wie die des IFrames.
quelle
Der Code, um dies ohne jQuery zu tun, ist heutzutage trivial:
const frame = document.querySelector('iframe') function syncHeight() { this.style.height = `${this.contentWindow.document.body.offsetHeight}px` } frame.addEventListener('load', syncHeight)
So haken Sie die Veranstaltung aus:
frame.removeEventListener('load', syncHeight)
quelle
Sie brauchen keine Abfrage im Iframe, um dies zu tun, aber ich benutze es, weil der Code so viel einfacher ist ...
Fügen Sie dies in das Dokument in Ihrem Iframe ein.
$(document).ready(function() { parent.set_size(this.body.offsetHeight + 5 + "px"); });
oben fünf hinzugefügt, um die Bildlaufleiste in kleinen Fenstern zu entfernen, ist die Größe nie perfekt.
Und das in Ihrem übergeordneten Dokument.
function set_size(ht) { $("#iframeId").css('height',ht); }
quelle
Das 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(); });
quelle
Ein einfacher Einzeiler beginnt mit einer Standard-Mindesthöhe und erhöht sich auf die Inhaltsgröße.
<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>
quelle
Akzeptierte Antworten
$('iframe').load
führen nun zua.indexOf is not a function
Fehlern. Kann aktualisiert werden auf:$('iframe').on('load', function() { // ... });
Nur wenige andere, die
.load
seit jQuery 1.8 veraltet sind: "Nicht erfasster TypeError: a.indexOf ist keine Funktion" -Fehler beim Öffnen eines neuen Foundation-Projektsquelle
Dies ist eine jQuery-freie Lösung, die mit SPA im Iframe zusammenarbeiten kann
document.getElementById('iframe-id').addEventListener('load', function () { let that = this; setTimeout(function () { that.style.height = that.contentWindow.document.body.offsetHeight + 'px'; }, 2000) // if you're having SPA framework (angularjs for example) inside the iframe, some delay is needed for the content to populate });
quelle
Dies ist meine ES6-freundliche No-JQuery-Einstellung
document.querySelector('iframe').addEventListener('load', function() { const iframeBody = this.contentWindow.document.body; const height = Math.max(iframeBody.scrollHeight, iframeBody.offsetHeight); this.style.height = `${height}px`; });
quelle