Regola la larghezza e l'altezza dell'iframe per adattarlo al contenuto

StackOverflow https://stackoverflow.com/questions/819416

Domanda

Ho bisogno di una soluzione per autoregolazione la larghezza e altezza di un iframe per adattarsi a malapena al suo soddisfare. Il punto è che la larghezza e l'altezza possono essere modificate dopo che iframe è stato caricato. Immagino di aver bisogno di un'azione per un evento per far fronte al cambiamento delle dimensioni del corpo contenuto nell'iframe.

È stato utile?

Soluzione 

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

Altri suggerimenti

Cross-browser plug-in jQuery .

Cross-bowser, cross domain libreria che utilizza mutationObserver per mantenere le dimensioni di iFrame in base al contenuto e postMessage per comunicare tra iFrame e la pagina host. Funziona con o senza jQuery.

Tutte le soluzioni fornite finora rappresentano solo un ridimensionamento una tantum. Dici che vuoi essere in grado di ridimensionare l'iFrame dopo che i contenuti sono stati modificati. Per fare ciò, devi eseguire una funzione all'interno di iFrame (una volta che il contenuto è cambiato, devi lanciare un evento per dire che il contenuto è cambiato).

Sono rimasto bloccato per un po ', poiché il codice all'interno dell'iFrame sembrava limitato al DOM all'interno dell'iFrame (e non riuscivo a modificare l'iFrame) e il codice eseguito all'esterno dell'iFrame era bloccato con il DOM all'esterno dell'iFrame ( e non ho potuto raccogliere un evento proveniente dall'iFrame).

La soluzione è venuta dallo scoprire (tramite l'assistenza di un collega) che a jQuery è possibile sapere quale DOM usare. In questo caso, il DOM della finestra principale.

In quanto tale, codice come questo fa ciò di cui hai bisogno (quando eseguito all'interno di iFrame): 

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

Se il contenuto dell'iframe proviene dallo stesso dominio, dovrebbe funzionare alla grande. Tuttavia richiede jQuery. 

$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

Per ridimensionarlo dinamicamente puoi farlo: 

<script language="javaScript">
<!--
function autoResize(){
    $('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>

Quindi nella pagina caricata dall'iframe aggiungi questo: 

<script language="javaScript">
function resize()
{
    window.parent.autoResize();
}

$(window).on('resize', resize);
</script>

soluzione one-liner per incorporamenti: inizia con una dimensione minima e aumenta alla dimensione del contenuto. non sono necessari tag di script. 

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

Ecco una soluzione cross-browser se non vuoi usare jQuery: 

/**
 * 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;
}

Sto usando questo codice per regolare automaticamente l'altezza di tutti gli iframe (con css auto Height) quando vengono caricati sulla pagina. Testato e funziona in IE, FF, Chrome, Safari e 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();
});

Dopo aver provato tutto sulla terra, questo funziona davvero per me.

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>

Questa è una soluzione solida prova 

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;

}

l'html 

<IFRAME SRC="blah.php" id="iframe1"  onLoad="resizer('iframe1');"></iframe>

Ho leggermente modificato la grande soluzione di Garnaph sopra. Sembrava che la sua soluzione avesse modificato le dimensioni dell'iframe in base alle dimensioni subito prima dell'evento. Per la mia situazione (invio e-mail tramite un iframe) avevo bisogno che l'altezza dell'iframe cambiasse subito dopo l'invio. Ad esempio, mostra errori di convalida o " grazie " messaggio dopo l'invio.

Ho appena eliminato la funzione click () nidificata e l'ho inserita nel mio 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>

Ha funzionato per me, ma non sono sicuro della funzionalità cross browser.

Ecco alcuni metodi: 

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

E UN ALTRO ALTERNATIVO 

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

PER NASCONDERE LO SCORRIMENTO CON 2 ALTERNATIVE COME INDICATO SOPRA 

<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 CON SECONDO CODICE 

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

Per nascondere le barre di scorrimento di iFrame, il genitore viene creato "overflow: nascosto". per nascondere le barre di scorrimento e l'iFrame viene fatto salire fino al 150% in larghezza e altezza, il che forza le barre di scorrimento all'esterno della pagina e poiché il corpo non ha barre di scorrimento, è possibile che l'iframe non superi i limiti della pagina . Questo nasconde le barre di scorrimento dell'iFrame a tutta larghezza!

fonte: imposta altezza automatica iframe

tutto non può funzionare usando i metodi sopra.

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

Se puoi controllare sia il contenuto IFRAME sia la finestra principale, allora hai bisogno del iFrame Resizer .

Questa libreria consente il ridimensionamento automatico dell'altezza e della larghezza di entrambi gli iFrame dello stesso dominio e interdominio per adattarli al contenuto contenuto. Fornisce una gamma di funzionalità per affrontare i problemi più comuni con l'utilizzo di iFrames, tra cui:

  • Ridimensionamento di altezza e larghezza dell'iFrame in base alle dimensioni del contenuto.
  • Funziona con più iFrame nidificati.
  • Autenticazione del dominio per iFrame tra domini.
  • Fornisce una gamma di metodi di calcolo delle dimensioni della pagina per supportare layout CSS complessi.
  • Rileva le modifiche al DOM che possono causare il ridimensionamento della pagina utilizzando MutationObserver.
  • Rileva eventi che possono causare il ridimensionamento della pagina (ridimensionamento della finestra, animazione e transizione CSS, modifica dell'orientamento e eventi del mouse).
  • Messaggi semplificati tra iFrame e la pagina host tramite postMessage.
  • Risolve i collegamenti alle pagine in iFrame e supporta i collegamenti tra iFrame e la pagina principale.
  • Fornisce metodi di dimensionamento e scorrimento personalizzati.
  • Espone la posizione principale e le dimensioni della finestra sull'iFrame.
  • Funziona con ViewerJS per supportare documenti PDF e ODF.
  • Supporto fallback fino a IE8.

Se qualcuno arriva qui: Ho avuto un problema con le soluzioni quando ho rimosso i div dall'iframe - l'iframe non si è accorciato.

Esiste un plugin Jquery che fa il lavoro:

http: // www. jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html

Ho scoperto un'altra soluzione dopo alcuni esperimenti. Inizialmente ho provato il codice contrassegnato come "migliore risposta" a questa domanda e non ha funzionato. La mia ipotesi è perché il mio iframe nel mio programma all'epoca era generato dinamicamente. Ecco il codice che ho usato (ha funzionato per me):

Javascript all'interno dell'iframe che viene caricato: 

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';
    };
  

È necessario aggiungere 4 o più pixel all'altezza per rimuovere le barre di scorrimento (qualche strano bug / effetto di iframe). La larghezza è ancora più strana, puoi tranquillamente aggiungere 18 px alla larghezza del corpo. Assicurati anche di aver applicato i CSS per il corpo iframe (sotto). 

html, body {
   margin:0;
   padding:0;
   display:table;
}

iframe {
   border:0;
   padding:0;
   margin:0;
}

Ecco l'html per iframe: 

<iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe>

Ecco tutto il codice all'interno del mio 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>

Ho eseguito i test in Chrome e un po 'in Firefox (in Windows XP). Ho ancora altri test da fare, quindi per favore dimmi come funziona per te.

Ho trovato che questo resizer funziona meglio: 

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;

}

Nota che l'oggetto style è stato rimosso.

In jQuery, questa è l'opzione migliore per me, che mi aiuta davvero !! Aspetto che ti aiuti!

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>

È possibile creare un "fantasma simile a" IFrame che si comporta come se non fosse lì.

Vedi http: //codecopy.wordpress. com / 2013/02/22 / ghost-iframe-crossdomain-iframe ridimensionamento /

Fondamentalmente usi il sistema di eventi parent.postMessage (..) descritto in https://developer.mozilla.org/en-US/docs/DOM /window.postMessage

Funziona con tutti i browser moderni!

Ecco come lo farei (testato 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>

So che il post è vecchio, ma credo che questo sia un altro modo per farlo. Ho appena implementato il mio codice. Funziona perfettamente sia con il caricamento della pagina sia con il ridimensionamento della pagina: 

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 da inserire nell'intestazione: 

function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
      }

Qui va il codice html iframe: 

<iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe>

Foglio di stile CSS

> 

.spec_iframe {
        width: 100%;
        overflow: hidden;
    }

Per l'attributo della direttiva angularjs: 

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';
        } );
    }
};
} );

Nota la percentuale, l'ho inserita in modo da poter contrastare il ridimensionamento solitamente fatto per iframe, testo, pubblicità ecc., metti semplicemente 0 se nessun ridimensionamento è implementazione

Se il contenuto è solo un semplice HTML, il modo più semplice è rimuovere l'iframe con javascript

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

È così che l'ho fatto scaricare o quando le cose cambiano. 

parent.jQuery("#frame").height(document.body.scrollHeight+50);

Contesto

Ho dovuto farlo da solo in un contesto di estensione web. Questa estensione web inserisce una parte dell'interfaccia utente in ogni pagina e questa interfaccia utente vive all'interno di un iframe . Il contenuto all'interno del iframe è dinamico, quindi ho dovuto regolare nuovamente la larghezza e l'altezza del iframe stesso.

Uso React ma il concetto si applica a tutte le librerie.

La mia soluzione (presuppone che tu controlli sia la pagina che l'iframe)

All'interno di iframe ho cambiato gli stili body per avere dimensioni davvero grandi. Ciò consentirà agli elementi interni di disporre utilizzando tutto lo spazio necessario. Rendere width e height non ha funzionato per me (suppongo perché l'iframe ha un width = 300px e di default = 150px ) 

/* something like this */
body {
  width: 99999px;
  height: 99999px;
}

Quindi ho iniettato tutta l'interfaccia utente iframe all'interno di un div e gli ho dato alcuni stili 

#ui-root {
  display: 'inline-block';     
}

Dopo aver eseguito il rendering della mia app all'interno di questo # ui-root (in React lo faccio all'interno di componentDidMount ) calcolo le dimensioni di questo div come e sincronizzarli con la pagina principale usando window.postMessage : 

let elRect = el.getBoundingClientRect()
window.parent.postMessage({
  type: 'resize-iframe',
  payload: {
    width: elRect.width,
    height: elRect.height
  }
}, '*')

Nel frame principale faccio qualcosa del genere: 

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)

Chiaramente ci sono molti scenari, tuttavia, avevo lo stesso dominio per documenti e iframe e sono stato in grado di affrontarlo fino alla fine del mio contenuto iframe: 

var parentContainer = parent.document.querySelector("iframe[src*=\"" + window.location.pathname + "\"]");
parentContainer.style.height = document.body.scrollHeight + 50 + 'px';

Questo 'trova' il contenitore principale e quindi imposta la lunghezza aggiungendo un fattore di sfumatura di 50 pixel per rimuovere la barra di scorrimento.

Non c'è nulla lì per 'osservare' il cambiamento dell'altezza del documento, questo non mi serviva per il mio caso d'uso. Nella mia risposta offro un mezzo per fare riferimento al contenitore padre senza utilizzare gli ID inseriti nel contenuto padre / iframe.

Semplicità: 

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);
});

Utilizza solo CSS inline: 

<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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top