Justieren der Breite und Höhe des iframe mit Inhalt darin passen
https://stackoverflow.com/questions/819416
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich brauche eine Lösung für Auto-Einstellung die width und height eines iframe zu kaum seinen Inhalt passen. Der Punkt ist, dass die Breite und die Höhe verändert werden können, nachdem die iframe geladen wurde. Ich denke, ich brauche ein Ereignis Aktion mit der Änderung in der Dimension des Körpers in den iframe enthaltenen befassen.
Lösung
<script type="application/javascript">
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iFrame = document.getElementById( 'iFrame1' );
resizeIFrameToFitContent( iFrame );
// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );
</script>
<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>
Andere Tipps
Cross-Browser jQuery-Plug-in .
Cross-Bowser, Cross-Domain Bibliothek , die mutationObserver verwendet, um halter iFrame auf den Inhalt bemessen und postMessage zwischen iFrame und Host-Seite zu kommunizieren. Arbeitet mit oder ohne jQuery.
Alle angegebenen Lösungen bisher nur für ein einmal-Konto ab Größe ändern. Sie erwähnen Sie die iFrame, um die Größe in der Lage sein, nachdem der Inhalt verändert werden. Um dies zu tun, müssen Sie eine Funktion innerhalb des iFrame auszuführen (sobald der Inhalt geändert werden, müssen Sie ein Ereignis aus zu sagen, dass der Inhalt geändert hat).
wurde ich mit diesem für eine Weile stecken, als Code innerhalb des iFrame auf das DOM innerhalb des iFrame beschränkt schien (und konnte den iFrame nicht bearbeiten) und Code außerhalb des iFrame ausgeführt wurde mit dem DOM außerhalb des iFrame stecken ( und konnte nicht eine Veranstaltung abholen kommen aus dem Inneren des iFrame).
Die Lösung kam von der Entdeckung (über Hilfe von einem Kollegen), dass jQuery gesagt werden kann, was DOM zu verwenden. In diesem Fall wird das DOM des übergeordneten Fensters.
Als solcher Code wie dies tut, was man braucht (wenn sie innerhalb des iFrame ausgeführt werden):
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#IDofControlFiringResizeEvent").click(function () {
var frame = $('#IDofiframeInMainWindow', window.parent.document);
var height = jQuery("#IDofContainerInsideiFrame").height();
frame.height(height + 15);
});
});
</script>
Wenn der iframe Inhalt aus der gleichen Domäne ist, sollte diese große Arbeit. Es erfordert jQuery though.
$('#iframe_id').load(function () {
$(this).height($(this).contents().height());
$(this).width($(this).contents().width());
});
Um es die Größe haben dynamisch diese Sie tun können:
<script language="javaScript">
<!--
function autoResize(){
$('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>
Dann auf der Seite, die die Iframe lädt diese hinzufügen:
<script language="javaScript">
function resize()
{
window.parent.autoResize();
}
$(window).on('resize', resize);
</script>
Einzeiler Lösung für Einbettungen: beginnt mit einer min-Größe und erhöht sich auf Inhaltsgröße. keine Notwendigkeit für Script-Tags.
<iframe src="http://URL_HERE.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>
Hier ist eine Cross-Browser-Lösung, wenn Sie wollen jQuery nicht verwenden:
/**
* Resizes the given iFrame width so it fits its content
* @param e The iframe to resize
*/
function resizeIframeWidth(e){
// Set width of iframe according to its content
if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
e.width = e.contentWindow.document.body.scrollWidth;
else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
e.width = e.contentDocument.body.scrollWidth + 35;
else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
e.width = e.contentDocument.body.offsetWidth + 35;
}
Ich verwende diesen Code auf Auto einstellen Höhe aller iframes (mit Klasse Autoheight), wenn sie auf Seite laden. Getestet und es funktioniert im IE, FF, Chrome, Safari und Opera.
function doIframe() {
var $iframes = $("iframe.autoHeight");
$iframes.each(function() {
var iframe = this;
$(iframe).load(function() {
setHeight(iframe);
});
});
}
function setHeight(e) {
e.height = e.contentWindow.document.body.scrollHeight + 35;
}
$(window).load(function() {
doIframe();
});
Nachdem ich alles auf der Erde versucht haben, das funktioniert wirklich für mich.
index.html
<style type="text/css">
html, body{
width:100%;
height:100%;
overflow:hidden;
margin:0px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
$(iframe).height($(iframe).contents().find('html').height());
}
</script>
<iframe src="http://iframe.domain.com" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto" onload="autoResize(this);"></iframe>
Dies ist eine solide sichere Lösung
function resizer(id)
{
var doc=document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;
var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );
document.getElementById(id).style.height=height;
document.getElementById(id).style.width=width;
}
die html
<IFRAME SRC="blah.php" id="iframe1" onLoad="resizer('iframe1');"></iframe>
ich etwas Garnaph die große Lösung oben modifiziert. Es schien wie seine Lösung die iframe Größe auf der Basis der Größe direkt vor der Veranstaltung geändert. Für meine Situation (E-Mail-Übermittlung über einen iframe) brauchte ich die iframe Höhe rechts nach Vorlage zu ändern. zeigen beispielsweise Validierungsfehler oder „Danke“ Nachricht nach der Einreichung.
ich eliminiert nur die verschachtelte click () Funktion und lege sie in meine iframe html:
<script type="text/javascript">
jQuery(document).ready(function () {
var frame = $('#IDofiframeInMainWindow', window.parent.document);
var height = jQuery("#IDofContainerInsideiFrame").height();
frame.height(height + 15);
});
</script>
für mich gearbeitet, aber über Cross-Browser-Funktionalität nicht sicher.
Hier sind mehrere Methoden:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>
UND eine andere Alternative
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
VERSTECKEN MIT 2 ALTERNATIVEN SCROLLING wie oben gezeigt
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>
HACK MIT ZWEITEM CODE
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>
, um die Bildlaufleisten des iFrame auszublenden, wird die übergeordnete „overflow: hidden“ gemacht Scrollbalken zu verstecken und das iFrame gemacht wird bis zu 150% Breite und Höhe zu gehen, die die Rollbalken außerhalb der Seite zwingt, und da die Körper nicht Scroll-Balken haben eine nicht die iframe erwarten kann ein überschreiten der Grenzen der Seite werden. Das blendet die Bildlaufleisten des iFrame mit voller Breite!
Quelle: set iframe Auto Höhe
können alle oben genannten Methoden nicht funktionieren werden.
javascript:
function resizer(id) {
var doc = document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;
var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight);
var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth);
document.getElementById(id).style.height = height;
document.getElementById(id).style.width = width;
}
html:
<div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv" >
<input id="txtHeight"/>height <input id="txtWidth"/>width
<iframe src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" style="width:100%; height: 47px" frameborder="0" ></iframe>
<iframe src="left.aspx" name="leftFrame" scrolling="yes" id="Iframe1" title="leftFrame" onload="resizer('Iframe1');" style="top:0px;left:0px;right:0px;bottom:0px;width: 30%; border:none;border-spacing:0px; justify-content:space-around;" ></iframe>
<iframe src="index.aspx" name="mainFrame" id="Iframe2" title="mainFrame" scrolling="yes" marginheight="0" frameborder="0" style="width: 65%; height:100%; overflow:visible;overflow-x:visible;overflow-y:visible; " onload="resizer('Iframe2');" ></iframe>
</div>
Env: IE 10, Windows 7 x64
Wenn Sie sowohl IFRAME Inhalt und übergeordnete Fenster steuern können, dann müssen Sie die iFrame Resizer .
Diese Bibliothek ermöglicht die automatische Größenanpassung der Höhe und Breite der beiden gleichen und Cross-Domain-iFrames ihre enthaltenen Inhalt passen. Es bietet eine Reihe von Funktionen, die am häufigsten auftretenden Probleme bei der Verwendung von iFrames zu adressieren, dazu gehört:
- Höhe und Breite Redimensionierung des iFrame Inhaltsgröße.
- Arbeiten mit mehreren verschachtelten und iFrames.
- Domain-Authentifizierung für Cross-Domain-iFrames.
- bietet eine Reihe von Seitengröße Berechnungsmethoden komplexe CSS-Layouts zu unterstützen.
- Ermittelt Änderungen an den DOM, der die Seite dazu führen kann, mit MutationObserver zu ändern.
- Ereignisse erkennt, dass die Seite verursachen kann, um die Größe (Fenster Größe ändern, CSS Animation und Transition, Ausrichtung ändern und Mausereignisse).
- Vereinfachte Messaging zwischen iFrame und Host-Seite über postmessage.
- Fixes in Seite Links in iFrame und unterstützt Verbindungen zwischen der iFrame und übergeordneten Seite.
- Stellt benutzerdefiniertes Sizing und Scrollen Methoden.
- Exposes geordnete Position und die Anzeigengröße auf die iFrame.
- Kompatibel mit ViewerJS PDF und ODF-Dokumenten zu unterstützen.
- Unterstützung Fallback nach unten zu IE8.
Falls jemand hier bekommen: Ich hatte ein Problem mit den Lösungen, wenn ich divs aus dem iframe entfernt -. Die iframe nur knapp sein Ziel kürzer geworden
Es ist eine jQuery-Plugin, das die Arbeit erledigt:
http: // www. jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html
dachte ich, eine andere Lösung nach einigen Experimentieren heraus. Ich habe versucht, die ursprünglich den Code markiert als ‚beste Antwort‘ auf diese Frage, und es hat nicht funktioniert. Meine Vermutung ist, weil mein iframe in meinem Programm zu dem Zeitpunkt dynamisch generiert wurde. Hier ist der Code, den ich verwendet (es für mich gearbeitet):
Javascript innerhalb des iframe, die geladen wird:
window.onload = function()
{
parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
};
Es ist notwendig, fügen Sie 4 oder mehr Pixel auf die Höhe Scrollbalken (einige seltsame Fehler / Effekt von iframes) zu entfernen. Die Breite ist noch seltsamer, sind Sie sicher 18px auf die Breite des Körpers hinzuzufügen. Vergewissern Sie sich außerdem, dass Sie die CSS für den Iframe Körper angewendet (unten).
html, body {
margin:0;
padding:0;
display:table;
}
iframe {
border:0;
padding:0;
margin:0;
}
Hier ist der HTML-Code für das iframe:
<iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe>
Hier ist der gesamte Code in meinem iframe:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>File Upload</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
display:table;
}
</style>
<script type="text/javascript">
window.onload = function()
{
parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
};
</script>
</head>
<body>
This is a test.<br>
testing
</body>
</html>
Ich habe in Chrom und ein wenig in firefox getan Prüfung (in Windows XP). Ich habe noch mehr Tests zu tun, so wenden Sie sich bitte mir sagen, wie dies für Sie arbeitet.
Ich fand diesen Resizer besser zu arbeiten:
function resizer(id)
{
var doc = document.getElementById(id).contentWindow.document;
var body_ = doc.body;
var html_ = doc.documentElement;
var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );
document.getElementById(id).height = height;
document.getElementById(id).width = width;
}
Beachten Sie die Style-Objekt entfernt wird.
In jQuery, ist dies die beste Option für mich, die mir wirklich helfen !! Ich warte, dass Hilfe Sie!
iframe
<iframe src="" frameborder="0" id="iframe" width="100%"></iframe>
jQuery
<script>
var valueSize = $( "#iframe" ).offset();
var totalsize = (valueSize.top * 2) + valueSize.left;
$( "#iframe" ).height(totalsize);
</script>
Es ist möglich, eine „geisterhafte“ IFrame zu machen, wie es wirkt nicht da war.
Siehe http: //codecopy.wordpress. com / 2013/02/22 / ghost-iframe-domänenübergreif-iframe-resize /
Im Grunde verwenden Sie das Ereignissystem parent.postMessage(..) beschrieben in
https://developer.mozilla.org/en-US/docs/DOM /window.postMessage
Das funktioniert ein alle modernen Browser!
Das ist, wie ich es tun würde (getestet in FF / Chrome):
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
$(iframe).height($(iframe).contents().find('html').height());
}
</script>
<iframe src="page.html" width="100%" height="100" marginheight="0" frameborder="0" onload="autoResize(this);"></iframe>
Ich weiß, dass die Post alt ist, aber ich glaube, das ist noch eine andere Möglichkeit, es zu tun. Ich habe auf meinem Code implementiert. Funktioniert perfekt sowohl beim Laden der Seite und auf Seite Resize:
var videoHeight;
var videoWidth;
var iframeHeight;
var iframeWidth;
function resizeIframe(){
videoHeight = $('.video-container').height();//iframe parent div's height
videoWidth = $('.video-container').width();//iframe parent div's width
iframeHeight = $('.youtubeFrames').height(videoHeight);//iframe's height
iframeWidth = $('.youtubeFrames').width(videoWidth);//iframe's width
}
resizeIframe();
$(window).on('resize', function(){
resizeIframe();
});
Javascript in Header gesetzt werden:
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
Hier geht iframe HTML-Code:
<iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe>
CSS-Stylesheet
>
.spec_iframe {
width: 100%;
overflow: hidden;
}
Für AngularJS Richtlinie Attribut:
G.directive ( 'previewIframe', function () {
return {
restrict : 'A',
replace : true,
scope : true,
link : function ( scope, elem, attrs ) {
elem.on ( 'load', function ( e ) {
var currentH = this.contentWindow.document.body.scrollHeight;
this.style.height = eval( currentH ) + ( (25 / 100)* eval( currentH ) ) + 'px';
} );
}
};
} );
den Prozentsatz Beachten Sie, ich es eingeführt, so dass Sie in der Regel für iframe, Text, Anzeigen usw. erfolgen kann Kundenservice counter Skalierung, setzen Sie einfach 0, wenn keine Skalierung Implementierung ist
Wenn der Inhalt nur eine sehr einfache html ist, der einfachste Weg ist es, die Iframe mit Javascript entfernen
html:
<div class="iframe">
<iframe src="./mypage.html" frameborder="0" onload="removeIframe(this);"></iframe>
</div>
javascript:
function removeIframe(obj)(
var iframeDocument = obj.contentDocument || obj.contentWindow.document;
var mycontent = iframeDocument.getElementsByTagName("body")[0].innerHTML;
obj.remove();
document.getElementsByClassName("iframe")[0].innerHTML = mycontent;
}
Dies ist, wie ich tat es onload oder wenn die Dinge ändern.
parent.jQuery("#frame").height(document.body.scrollHeight+50);
Kontext
Ich hatte dies selbst in einem Rahmen einer Web-Erweiterung zu tun. Diese Web-Erweiterung spritzt einiges Stück von UI in jede Seite, und das UI lebt in einer iframe. Der Inhalt innerhalb des iframe ist dynamisch, so dass ich die Breite und Höhe des iframe nachzustellen hatte selbst.
ich Reagieren , aber das Konzept gilt für jede Bibliothek.
Meine Lösung (dies setzt voraus, dass Sie sowohl die Seite und die iframe steuern)
Im Inneren des iframe I body Arten verändert wirklich großen Dimensionen zu haben. Auf diese Weise können die Elemente im Inneren alle notwendigen Raum mit legen. Herstellung width und height 100% nicht für mich arbeiten (ich glaube, weil die iframe eine Standard width = 300px und height = 150px hat)
/* something like this */
body {
width: 99999px;
height: 99999px;
}
Dann injizierte ich alle iframe UI in einem div und gab es einige Stile
#ui-root {
display: 'inline-block';
}
Nach dem Rendern meine app in diesem #ui-root (in Reagieren Ich mache das Innere componentDidMount) Ich berechne die Dimensionen dieses DIV wie und synchronisieren Sie sie auf der übergeordneten Seite mit window.postMessage:
let elRect = el.getBoundingClientRect()
window.parent.postMessage({
type: 'resize-iframe',
payload: {
width: elRect.width,
height: elRect.height
}
}, '*')
In der übergeordneten Frame ich etwas tun, wie folgt aus:
window.addEventListener('message', (ev) => {
if(ev.data.type && ev.data.type === 'resize-iframe') {
iframe.style.width = ev.data.payload.width + 'px'
iframe.style.height = ev.data.payload.height + 'px'
}
}, false)
Natürlich gibt es viele Szenarien, aber ich gleiche Domain für die Dokumenten- und iframe hatte, und ich war in der Lage, dies zu Ende meines iframe Inhalts zu heften:
var parentContainer = parent.document.querySelector("iframe[src*=\"" + window.location.pathname + "\"]");
parentContainer.style.height = document.body.scrollHeight + 50 + 'px';
Diese ‚findet‘ die Container übergeordneten und setzt dann die Länge auf einem Fudge-Faktor von 50 Pixeln Hinzufügen der Bildlaufleiste zu entfernen.
Es gibt nichts, dort zu ‚beobachten‘ die Dokumentenhöhe zu ändern, dies ich nicht für meinen Anwendungsfall brauchte. In meiner Antwort habe ich ohne ids die übergeordneten Container Referenzierung ein Mittel bringt in den übergeordneten / iframe Inhalt gebacken.
Einfachheit:
var iframe = $("#myframe");
$(iframe.get(0).contentWindow).on("resize", function(){
iframe.width(iframe.get(0).contentWindow.document.body.scrollWidth);
iframe.height(iframe.get(0).contentWindow.document.body.scrollHeight);
});
Dieses verwendet Inline-CSS nur:
<iframe src="http://example.com" style="resize: both;"
onload="this.style.height=this.contentDocument.body.scrollHeight +'px'; this.style.width=this.contentDocument.body.scrollWidth +'px';"
onresize="this.style.height=this.contentDocument.body.scrollHeight +'px'; this.style.width=this.contentDocument.body.scrollWidth +'px';">
</iframe>
