jquery ottenere altezza del contenuto iframe quando caricato

Question

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 che è stata caricata nell'iframe?

Lo chiedo perché non è possibile ridimensionare l'altezza di iframe al 100% o automatica. Ecco perché penso che ho 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> 

Answer 1

ok finalmente ho trovato una buona soluzione :

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

Perché alcune sopracciglia sers (Safari e Opera precedenti) segnalano un onload completato prima che i CSS rendano necessario impostare un micro Timeout e vuoto e riassegnare lo 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'; 
} 

Answer 2

Il meno complicato la risposta è usare .contents() per arrivare all'iframe. È interessante notare, tuttavia, che restituisce un valore diverso da quello che ottengo utilizzando il codice nella mia risposta originale, a causa del riempimento sul corpo, credo.

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

---

Ecco come ho fatto per la comunicazione cross-domain, quindi ho paura che sia forse inutilmente complicato. Innanzitutto, inserisco jQuery nel documento di iFrame; questo consumerà più memoria, ma non dovrebbe aumentare il tempo di caricamento in quanto lo script deve essere caricato solo una volta.

Utilizzare il jQuery di iFrame per misurare l'altezza del corpo del tuo iframe il prima possibile (onDOMReady) e quindi impostare l'hash dell'URL su tale altezza. E nel documento principale, aggiungi un evento onload al tag iFrame che esaminerà la posizione dell'iframe ed estrarrà il valore che ti serve. Poiché onDOMReady si verificherà sempre prima dell'evento di caricamento del documento, puoi essere abbastanza sicuro che il valore verrà comunicato correttamente senza una condizione di competizione che complica 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 principale:

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