Fare in modo che un iframe occupi spazio verticale
-
09-06-2019 - |
Domanda
Vorrei avere un iframe
occupa tutto lo spazio verticale necessario per visualizzare il contenuto e non visualizzare una barra di scorrimento.È tutto possibile ?
Esistono soluzioni alternative?
Soluzione
Questo dovrebbe impostare il IFRAME
altezza all'altezza del suo contenuto:
<script type="text/javascript">
the_height = document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;
document.getElementById('the_iframe').height = the_height;
</script>
Potresti voler aggiungere scrolling="no"
alla tua IFRAME
per disattivare le barre di scorrimento.
modificare: Ops, ho dimenticato di dichiarare the_height
.
Altri suggerimenti
La soluzione alternativa è non utilizzare <iframe>
e preelaborare il codice sul lato server.
Dai un'occhiata anche a questo thread: In che modo DiggBar ridimensiona dinamicamente l'altezza del suo iframe in base al contenuto non presente nel dominio?.
Risponde alla stessa domanda.
Questo snippet CSS dovrebbe rimuovere la barra di scorrimento verticale:
body {
overflow-x: hidden;
overflow-y: hidden;
}
Non sono ancora sicuro di fargli occupare tutto lo spazio verticale di cui ha bisogno, ma vedrò se riesco a capirlo.
Aggiunta di un DOCTYPE
dichiarazione al IFRAME
il documento sorgente aiuterà a calcolare il valore corretto dalla riga
document.getElementById('the_iframe').contentWindow.document.body.scrollHeight
Vedere W3C DOCTYPE per esempi
Stavo riscontrando problemi sia con IE che con FF mentre eseguivano il rendering del file iframe
documento in modalità 'stranezze', finché non ho aggiunto il file DOCTYPE
.
Supporto FF/IE/Chrome:.scrollHeight non funziona con Chrome, quindi ho creato un esempio Javascript utilizzando jQuery per impostare tutto IFRAME
altezze su una pagina in base al contenuto dell'iframe.NOTA:Questo serve per le pagine di riferimento all'interno del tuo dominio attuale.
<script type="text/javascript">
$(document).ready(function(){
$('iframe').each(function(){
var context = $(this);
context.load(function(event){ // attach the onload event to the iframe
var body = $(this.contentWindow.document).find('body');
if (body.length > 0 && $(body).find('*').length > 0) { // check if iframe has contents
context.height($(body.get(0)).height() + 20);
} else {
context.hide(); // hide iframes with no contents
}
});
});
});
</script>