jquery ottiene l'altezza del contenuto dell'iframe quando viene caricato

Ho una pagina di aiuto, help.php che sto caricando all'interno di un iframe in main.php Come posso ottenere l'altezza di questa pagina una volta caricata nell'iframe?

Lo chiedo perché non riesco a definire lo stile dell'altezza di iframe su 100% o automatico. Ecco perché penso di aver bisogno di usare javascript .. Sto usando 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>

ok finalmente ho trovato una buona soluzione:

$('iframe').load(function() {
    this.style.height =
    this.contentWindow.document.body.offsetHeight + 'px';
});

Poiché alcuni browser (i vecchi Safari e Opera) segnalano che il caricamento è stato completato prima del rendering CSS, è necessario impostare un micro Timeout, cancellare e riassegnare l'src dell'iframe.

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

La risposta meno complicata è usare .contents()per arrivare all'iframe. È interessante notare, tuttavia, che restituisce un valore diverso da quello che ottengo usando il codice nella mia risposta originale, a causa dell'imbottitura sul corpo, credo.

$('iframe').contents().height() + 'is the height'

È così che ho fatto per la comunicazione tra domini, quindi temo che sia forse inutilmente complicato. Per prima cosa, metterei jQuery nel documento dell'iFrame; questo consumerà più memoria, ma non dovrebbe aumentare il tempo di caricamento poiché lo script deve essere caricato solo una volta.

Usa jQuery di iFrame per misurare l'altezza del corpo del tuo iframe il prima possibile (onDOMReady) e quindi imposta l'hash dell'URL a quell'altezza. E nel documento principale, aggiungi un onloadevento al tag iFrame che esaminerà la posizione dell'iframe ed estrarrà il valore di cui hai bisogno. Poiché onDOMReady si verificherà sempre prima dell'evento di caricamento del documento, puoi essere abbastanza certo che il valore verrà comunicato correttamente senza che una race condition complichi le cose.

In altre parole:

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

... e nel documento genitore:

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

Ho riscontrato che quanto segue funziona su Chrome, Firefox e IE11:

$('iframe').load(function () {
    $('iframe').height($('iframe').contents().height());
});

Al termine del caricamento del contenuto degli iframe, l'evento si attiverà e imposterà l'altezza degli iframe su quella del suo contenuto. Funzionerà solo per le pagine all'interno dello stesso dominio di quello dell'IFrame.

Il codice per farlo senza jQuery è banale al giorno d'oggi:

const frame = document.querySelector('iframe')
function syncHeight() {
  this.style.height = `${this.contentWindow.document.body.offsetHeight}px`
}
frame.addEventListener('load', syncHeight)

Per sganciare l'evento:

frame.removeEventListener('load', syncHeight)

Non hai bisogno di jquery all'interno dell'iframe per farlo, ma lo uso perché il codice è molto più semplice ...

Inseriscilo nel documento all'interno del tuo iframe.

$(document).ready(function() {
  parent.set_size(this.body.offsetHeight + 5 + "px");  
});

aggiunti cinque sopra per eliminare la barra di scorrimento su finestre piccole, non è mai perfetto per le dimensioni.

E questo nel documento del tuo genitore.

function set_size(ht)
{
$("#iframeId").css('height',ht);
}

questa è la risposta corretta che ha funzionato per me

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

la riga semplice inizia con un'altezza minima predefinita e aumenta fino alla dimensione del contenuto.

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

Le risposte accettate $('iframe').loadora produrranno un a.indexOf is not a functionerrore. Può essere aggiornato a:

$('iframe').on('load', function() {
  // ...
});

Pochi altri simili a .loaddeprecati da jQuery 1.8: errore "Uncaught TypeError: a.indexOf non è una funzione" all'apertura di un nuovo progetto di base

Questa è una soluzione gratuita jQuery che può funzionare con SPA all'interno dell'iframe

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

Questa è la mia versione amichevole di ES6 no-jquery

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