Je charge une page Web aspx dans une iframe. Le contenu de l'iframe peut avoir une hauteur supérieure à celle de l'iframe. L'iframe ne doit pas avoir de barres de défilement.
J'ai une balise div
enveloppante à l'intérieur de l'iframe qui contient essentiellement tout le contenu. J'ai écrit un peu de jQuery pour que le redimensionnement ait lieu :
$("#TB_window", window.parent.document).height($("body").height() + 50);
où
TB_window
est la div dans laquelle l'Iframe
est contenue.
body
- la balise body de l'aspx dans l'iframe.
Ce script est attaché au contenu de l'iframe. Je récupère l'élément TB_window
de la page parent. Cela fonctionne bien sous Chrome, mais la TB_window s'effondre sous Firefox. Je ne comprends vraiment pas pourquoi cela se produit.
Vous pouvez récupérer la hauteur du contenu de la IFRAME
's en utilisant :
contentWindow.document.body.scrollHeight
Une fois la IFRAME
chargée, vous pouvez modifier sa hauteur en procédant comme suit :
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
// here you can make the height, I delete it first, then I make it again
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
Ensuite, sur la balise IFRAME
, vous accrochez le gestionnaire comme ceci :
<iframe id="idIframe" onload="iframeLoaded()" ...
Il y a quelque temps, j'ai eu une situation où j'avais besoin d'appeler iframeLoaded
à partir de la IFRAME
elle-même après qu'un formulaire ait été soumis à l'intérieur. Pour ce faire, il suffit de faire ce qui suit dans les scripts de contenu de la IFRAME
:
parent.iframeLoaded();
Une réponse légèrement améliorée à Aristos...
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
</script>
Puis déclarez dans votre iframe comme suit :
<iframe onload="resizeIframe(this)" ...
Il y a deux améliorations mineures :
iframe.height = ""
si vous allez le réaffecter dans l'instruction suivante. En effet, cela entraîne une surcharge car vous traitez avec un élément DOM.Modifier : Si le contenu du cadre change constamment, appelez :
parent.resizeIframe(this.frameElement);
à l'intérieur de l'iframe après la mise à jour. Cela fonctionne pour la même origine.
Ou pour une détection automatique :
// on resize
this.container = this.frameElement.contentWindow.document.body;
this.watch = () => {
cancelAnimationFrame(this.watcher);
if (this.lastScrollHeight !== container.scrollHeight) {
parent.resizeIframeToContentSize(this.frameElement);
}
this.lastScrollHeight = container.scrollHeight;
this.watcher = requestAnimationFrame(this.watch);
};
this.watcher = window.requestAnimationFrame(this.watch);
$(document).height() // - $('body').offset().top
et / ou
$(window).height()
Voir la question https://stackoverflow.com/questions/806402 de Stack Overflow.
Essayez ceci pour trouver la hauteur du corps en jQuery :
if $("body").height()
Il n'y a pas de valeur si [Firebug][1]. C'est peut-être là que réside le problème.