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

Ho bisogno di una soluzione per l'auto-regolazione del widthe heightdi una iframeper adattarsi a malapena il suo contenuto. 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 affrontare il cambiamento nelle dimensioni del corpo contenuto nell'iframe.

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

Plug-in jQuery tra browser .

Libreria cross-bowser e cross-domain che utilizza mutationObserverper mantenere le dimensioni di iFrame in base al contenuto e postMessageper 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 'di tempo, poiché il codice all'interno dell'iFrame sembrava limitato al DOM all'interno dell'iFrame (e non poteva modificare l'iFrame), e il codice eseguito all'esterno dell'iFrame era bloccato con il DOM all'esterno dell'iFrame (e non poteva t raccogliere un evento proveniente dall'iFrame).

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

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

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>

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>

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

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>

Sto usando questo codice per regolare automaticamente l'altezza di tutti gli iframe (con classe autoHeight) 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();
});

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 gli errori di convalida o il messaggio di ringraziamento 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.

Se riesci a controllare sia il contenuto IFRAME che la finestra principale, allora hai bisogno di 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 iFrame multipli e 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 finestra, animazione e transizione CSS, modifica orientamento e 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 padre.
• Fornisce metodi di dimensionamento e scorrimento personalizzati.
• Espone la posizione principale e la dimensione della finestra sull'iFrame.
• Funziona con ViewerJS per supportare documenti PDF e ODF.
• Supporto di fallback fino a IE8.

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

Ho trovato 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 (alcuni strani bug / effetti 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 (di seguito).

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

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

Ecco l'html per l'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 fatto 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.

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>

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 dell'iFrame, il genitore viene reso "overflow: nascosto" per nascondere le barre di scorrimento e l'iFrame viene fatto salire fino al 150% in larghezza e altezza che forza le barre di scorrimento all'esterno della pagina e poiché il corpo non lo fa ' Non ci sono barre di scorrimento, non ci si può aspettare che l'iframe superi i limiti della pagina. Questo nasconde le barre di scorrimento dell'iFrame a tutta larghezza!

fonte: imposta l'altezza automatica iframe

Nel caso qualcuno dovesse arrivare qui: ho avuto un problema con le soluzioni quando ho rimosso i div dall'iframe - l'iframe non si è accorciato.

C'è un plugin Jquery che fa il lavoro:

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

Ho trovato questo resizer per funzionare 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;

}

Si noti che l'oggetto stile è 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>

Contesto

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

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

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

All'interno iframeho cambiato bodystile per avere dimensioni davvero grandi. Ciò consentirà agli elementi interni di disporre utilizzando tutto lo spazio necessario. Fare widthe il height100% non ha funzionato per me (suppongo perché l'iframe ha un valore predefinito width = 300pxe height = 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 componentDidMount) computo le dimensioni di questo div come e le sincronizzo con la pagina padre usando window.postMessage:

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

Nel frame genitore 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)

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

Vedere http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/

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

Questo funziona con tutti i browser moderni!

So che il post è vecchio, ma credo che questo sia un altro modo per farlo. Ho appena implementato il mio codice. Funziona perfettamente sia al caricamento della pagina che al 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';
      }

Ecco qui 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 di solito fatto per iframe, testo, annunci ecc., Metti semplicemente 0 se nessun ridimensionamento è implementazione

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

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

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, porto un modo per fare riferimento al contenitore padre senza usare gli id ​​inseriti nel contenuto padre / iframe.

Se riesci a vivere con proporzioni fisse e vorresti un iframe reattivo , questo codice ti sarà utile. Sono solo regole CSS.

.iframe-container {
  overflow: hidden;
  /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 
  0.5625) */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

L'iframe deve avere un div come contenitore.

<div class="iframe-container">
   <iframe src="http://example.org"></iframe>
</div>

Il codice sorgente si basa su questo sito e Ben Marshall ha una buona spiegazione.

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

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

Codice HTML:

<div class="iframe">
    <iframe src="./mypage.html" frameborder="0" onload="removeIframe(this);"></iframe>
</div>

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

<iframe src="hello.html" sandbox="allow-same-origin"
        onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';this.style.width=(this.contentWindow.document.body.scrollWidth+20)+'px';">
</iframe>