Fare in modo che un iframe occupi spazio verticale

Question

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?

Answer 1

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.

Answer 2

La soluzione alternativa è non utilizzare <iframe> e preelaborare il codice sul lato server.

Answer 3

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.

Answer 4

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.

Answer 5

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>