Zum Beispiel:
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>Ich möchte, dass es seine Höhe entsprechend dem Inhalt anpassen kann, ohne dass ein Bildlauf erforderlich ist.
En hjpotter92 Antwort funktioniert gut genug in bestimmten Fällen, aber ich fand die iframe Inhalt oft unten beschnitten in Firefox & IE, während in Chrome in Ordnung.
Die folgende Methode funktioniert bei mir gut und behebt das Clipping-Problem. Der Code wurde gefunden unter http://www.dyn-web.com/tutorials/iframes/height/ . Ich habe eine kleine Änderung vorgenommen, um das onload-Attribut aus dem HTML zu entfernen. Platzieren Sie den folgenden Code nach dem <iframe> HTML und vor dem Schließen </body> Tag:
<script type="text/javascript">
function getDocHeight(doc) {
doc = doc || document;
// stackoverflow.com/questions/1145850/
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument? ifrm.contentDocument:
ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px"; // reset to minimal height ...
// IE opt. for bing/msn needs a bit added or scrollbar appears
ifrm.style.height = getDocHeight( doc ) + 4 + "px";
ifrm.style.visibility = 'visible';
}
document.getElementById('ifrm').onload = function() { // Adjust the Id accordingly
setIframeHeight(this.id);
}
</script>Ihr iframe HTML:
<iframe id="ifrm" src="some-iframe-content.html"></iframe>Beachten Sie, wenn Sie es vorziehen, das Javascript in die <head> des Dokuments, dann können Sie auf eine Inline-Anweisung zurückgreifen onload Attribut in der Datei iframe HTML, wie in der dyn-web Web-Seite.
JQuery's .contents() Methode können wir die unmittelbaren Kinder des Elements im DOM-Baum durchsuchen.
jQuery:
$('iframe').height( $('iframe').contents().outerHeight() );Denken Sie daran, dass der Körper der Seite innerhalb des iframe seine Höhe haben muss
CSS:
body {
height: auto;
overflow: auto
}
Das funktioniert bei mir (meistens).
Setzen Sie dies an den unteren Rand Ihrer Seite.
<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="application/javascript" src="/script/jquery.browser.js">
</script>
<script type="application/javascript" src="/script/jquery-iframe-auto-height.js">
</script>
<script type="application/javascript">
jQuery('iframe').iframeAutoHeight();
$(window).load(
function() {
jQuery('iframe').iframeAutoHeight();
}
);
// for when content is not html e.g. a PDF
function setIframeHeight() {
$('.iframe_fullHeight').each(
function (i, item) {
item.height = $(document).height();
}
);
};
$(document).ready( function () {
setIframeHeight();
});
$(window).resize( function () {
setIframeHeight();
});
</script> Die erste Hälfte stammt aus dem Englischen und funktioniert, wenn der iframe html enthält. Die zweite Hälfte setzt den iframe auf Seitenhöhe (nicht auf Inhaltshöhe), wenn die iframes-Klasse iframe_fullHeight . Sie können dies verwenden, wenn der Inhalt ein PDF oder ähnliches ist, aber Sie müssen die Klasse festlegen. Kann auch nur verwendet werden, wenn die volle Höhe angemessen ist.
Hinweis: Aus irgendeinem Grund wird bei der Neuberechnung nach der Größenänderung des Fensters die Höhe falsch berechnet.
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
2 Stimmen
Dies kann über CSS erfolgen. Es gibt ein Konzept in CSS namens Media-Queries, bei dem die Größe des Inhalts entsprechend der Bildschirmgröße angepasst wird.
1 Stimmen
Angular iFrame Auto-Höhe: gitlab.com/reduardo7/angular-iframe-auto-height
5 Stimmen
"Angular ", d.h., Javascript erforderlich? Mit anderen Worten, man kann dies nicht mit seitenübergreifenden Iframes tun (aufgrund von Cross-Site-Scripting-Einschränkungen), ist das richtig? Wie @clankill3r vorschlägt, zeigt dies die Notwendigkeit für eine reine CSS-Lösung für dieses Problem!