jquery bekomme height von iframe content wenn geladen

Question

Ich habe eine Hilfeseite, help.php, die ich in einen iframe in main.php lade Wie bekomme ich die Höhe dieser Seite, nachdem sie in den iframe geladen wurde?

Ich frage das, weil ich die Höhe von Iframe zu 100% oder Auto nicht stylen kann. Deshalb habe ich glaube, ich brauche Javascript zu verwenden .. Ich bin mit 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 fand ich endlich eine gute Lösung :

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

Da einige Brauen sers (ältere Safari und Opera) berichten, dass onload abgeschlossen ist, bevor CSS rendert, müssen Sie ein Mikro-Timeout setzen und den src des iframes leeren und neu zuweisen.

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

Je weniger kompliziert Antwort ist .contents() zu verwenden, um den iframe zu bekommen. Interessanterweise gibt es jedoch einen anderen Wert als den Code in meiner ursprünglichen Antwort, aufgrund der Polsterung des Körpers, glaube ich.

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

---

Dies ist, wie ich es für Cross-Domain-Kommunikation gemacht haben, so fürchte ich es vielleicht unnötig kompliziert ist. Zuerst würde ich jQuery in das iFrame-Dokument einfügen. Dies wird mehr Speicher verbrauchen, aber es sollte die Ladezeit nicht erhöhen, da das Skript nur einmal geladen werden muss.

Verwenden Sie die jQuery von iFrame, um die Höhe des Körpers Ihres iframes so früh wie möglich zu messen (onDOMReady) und stellen Sie dann den URL-Hash auf diese Höhe ein. Fügen Sie im übergeordneten Dokument ein onload-Ereignis zum iFrame-Tag hinzu, das den Speicherort des Iframes überprüft und den gewünschten Wert extrahiert. Da onDOMReady immer vor dem Loadereignis des Dokuments stattfindet, können Sie ziemlich sicher sein, dass der Wert korrekt kommuniziert wird, ohne dass eine rassebedingte Situation die Dinge komplizierter macht.

Mit anderen Worten:

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

... und im übergeordneten Dokument:

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