Sto caricando una pagina web aspx in un iframe. Il contenuto dell'iframe può essere più alto dell'altezza dell'iframe. L'iframe non dovrebbe avere barre di scorrimento.
Ho un tag wrapper div
all'interno dell'iframe che fondamentalmente è tutto il contenuto. Ho scritto un po' di jQuery per far avvenire il ridimensionamento:
$("#TB_window", window.parent.document).height($("body").height() + 50);
dove
TB_window
è il div in cui è contenuto l' Iframe
.
body
- il tag body dell'aspx nell'iframe.
Questo script è allegato al contenuto dell'iframe. Sto ottenendo l'elemento TB_window
dalla pagina madre. Mentre questo funziona bene su Chrome, ma il TB_window collassa in Firefox. Sono davvero confuso/perduto sul perché questo accade.
Potete recuperare l'altezza del IFRAME
'contenuto usando:
contentWindow.document.body.scrollHeight
.
Dopo che il IFRAME
è stato caricato, puoi cambiare l'altezza facendo quanto segue:
<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>
Poi, sul tag IFRAME
, agganci il gestore in questo modo:
<iframe id="idIframe" onload="iframeLoaded()" ...
Ho avuto una situazione un po' di tempo fa in cui avevo bisogno di chiamare anche iframeLoaded
dallo stesso IFRAME
dopo che si era verificato un invio di un modulo. È possibile realizzare ciò facendo quanto segue all'interno degli script di contenuto di IFRAME
:
parent.iframeLoaded();
Una risposta leggermente migliorata ad Aristos...
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
</script>
Allora dichiara nel tuo iframe come segue:
<iframe onload="resizeIframe(this)" ...
Ci sono due piccoli miglioramenti:
iframe.height = ""
se hai intenzione di riassegnarla nella dichiarazione successiva. Farlo in realtà comporta un overhead in quanto si ha a che fare con un elemento DOM.Modifica: Se il contenuto del frame cambia sempre, allora chiama:
parent.resizeIframe(this.frameElement);
dall'interno dell'iframe dopo l'aggiornamento. Funziona per la stessa origine.
O per il rilevamento automatico:
// 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
e / o
$(window).height()
Vedere la domanda di Stack Overflow https://stackoverflow.com/questions/806402.
Prova questo per trovare l'altezza del corpo in jQuery:
if $("body").height()
Non ha un valore se Firebug. Forse è questo il problema.