Come ottenere l'altezza dell'intero documento con JavaScript?

333

Alcuni documenti non riesco a ottenere l'altezza del documento (per posizionare qualcosa assolutamente in fondo). Inoltre, un padding-bottom on sembra non fare nulla su queste pagine, ma lo fa sulle pagine in cui l'altezza tornerà. Caso (i) al punto:

http://fandango.com
http://paperbackswap.com

Su Fandango
i $(document).height();rendimenti di jQuery restituiscono valori corretti
document.height0
document.body.scrollHeightrestituisce 0

In scambio di brossura: TypeError
di jQuery $(document).height();: $(document)è null
document.heightrestituisce un valore errato
document.body.scrollHeightrestituisce un valore errato

Nota: ho i permessi a livello di browser, se c'è qualche trucco lì.

javascript

— Nic
fonte

5

$ (documento) è nullo perché su quel sito non è stato caricato jQuery ...

— James,

Hm, avrei giurato di aver controllato qualcos'altro per confermare che jQuery era registrato ma non sembra che io abbia fatto, HA! Pensavo che Firebug avesse confezionato jQuery ... hm, immagino che verificherò se poi è una soluzione.

— Nic

4

firebug non ha pacchetti

— jQUery

Vedi Trovare le dimensioni della finestra del browser . Ha una grande tabella dei comportamenti di diversi browser.

— Oriol,

671

Le dimensioni del documento sono un incubo di compatibilità del browser perché, sebbene tutti i browser espongano le proprietà clientHeight e scrollHeight, non tutti concordano su come vengono calcolati i valori.

C'era una complessa formula di buone pratiche in giro per come hai verificato l'altezza / larghezza corrette. Ciò ha comportato l'utilizzo delle proprietà document.documentElement se disponibili o il ripristino delle proprietà del documento e così via.

Il modo più semplice per ottenere l'altezza corretta è ottenere tutti i valori di altezza trovati sul documento o documentElement e utilizzare quello più alto. Questo è fondamentalmente ciò che fa jQuery:

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

Un rapido test con il bookmarklet Firebug + jQuery restituisce l'altezza corretta per entrambe le pagine citate, così come l'esempio di codice.

Si noti che testare l'altezza del documento prima che il documento sia pronto comporterà sempre uno 0. Inoltre, se si carica più roba o se l'utente ridimensiona la finestra, potrebbe essere necessario ripetere il test. Utilizzare onloado un evento pronto per il documento se è necessario al momento del caricamento, altrimenti eseguire il test ogni volta che è necessario il numero.

— Borgar
fonte

2

valuta questa soluzione, perché funziona quando stai usando una libreria di prototipi, con jQuery non c'è questo problema

— se_pavel,

10

Quando si lavora con iframe e jquery, a causa di questo metodo di calcolo, l'altezza del documento dell'iframe sarà sempre almeno l'altezza dell'iframe che si trova dietro. Questo è importante notare quando si desidera ridurre l'altezza dell'iframe in modo che corrisponda al contenuto. Devi prima ripristinare l'altezza dell'iframe.

— David Lay

3

Ho avuto la necessità di far crescere l'iframe e ridurlo (app di Facebook) e ho scoperto che document.body.offsetHeight era la scelta migliore per me, supportata con precisione dalla maggior parte dei browser.

— JeffG

1

Questo è ottimo anche se può dare risultati errati se il documento non è pronto - cioè, quando viene utilizzato nel codice generato dal server ...

— stuartdotnet

1

Il test del documento prima che sia pronto non funzionerà. Ciò non ha nulla a che fare con il codice / i documenti generati, ma piuttosto come viene caricato il documento. Il test deve essere eseguito dopo che il documento è pronto e suggerirei di eseguirlo solo quando il documento è completamente caricato poiché gli elementi rimanenti possono influire sull'altezza, ridimensionando anche il browser.

— Borgar,

214

Questa è una domanda davvero vecchia e quindi ha molte risposte obsolete. A partire dal 2020 tutti i principali browser hanno aderito allo standard .

Risposta per il 2020:

document.body.scrollHeight

Modifica: quanto sopra non tiene conto dei margini sul <body>tag. Se il tuo corpo ha margini, usa:

document.documentElement.scrollHeight

— Marquizzo
fonte

hm - ora lo provo e funziona - non so perché - così ok :) - elimino il mio commento precedente

— Kamil Kiełczewski

6

A partire dal 2017 questa dovrebbe essere contrassegnata come la risposta giusta per me.

— Joan,

@Joan Dipende dal poster originale per decidere :)

— Marquizzo,

Non funziona in presenza di margini. document.documentElement.getBoundingClientRect()funziona meglio.

— torvin,

3

C'è un errore in questo: dire ad esempio che c'è un <h1>elemento all'inizio <body>con il suo margine predefinito, spingerà l' <body>elemento verso il basso senza un modo per rilevarlo.document.documentElement.scrollHeight(non document.body,scrollHeight) è il modo più accurato di fare le cose. Funziona sia con i margini del corpo che con i margini delle cose all'interno del corpo spingendolo verso il basso.

— Ethan,

29

Puoi persino usare questo:

var B = document.body,
    H = document.documentElement,
    height

if (typeof document.height !== 'undefined') {
    height = document.height // For webkit browsers
} else {
    height = Math.max( B.scrollHeight, B.offsetHeight,H.clientHeight, H.scrollHeight, H.offsetHeight );
}

o in un modo più jQuery (dal momento che come hai detto jQuery non mente) :)

Math.max($(document).height(), $(window).height())

— mimo
fonte

24

Calcolo dell'altezza del documento completo:

Per essere più generico e trovare l'altezza di qualsiasi documento, puoi semplicemente trovare il nodo DOM più alto nella pagina corrente con una semplice ricorsione:

;(function() {
    var pageHeight = 0;

    function findHighestNode(nodesList) {
        for (var i = nodesList.length - 1; i >= 0; i--) {
            if (nodesList[i].scrollHeight && nodesList[i].clientHeight) {
                var elHeight = Math.max(nodesList[i].scrollHeight, nodesList[i].clientHeight);
                pageHeight = Math.max(elHeight, pageHeight);
            }
            if (nodesList[i].childNodes.length) findHighestNode(nodesList[i].childNodes);
        }
    }

    findHighestNode(document.documentElement.childNodes);

    // The entire page height is found
    console.log('Page height is', pageHeight);
})();

Puoi provarlo sui tuoi siti di esempio ( http://fandango.com/ o http://paperbackswap.com/ testarlo ) incollando questo script su una console DevTools.

NOTA: funziona con Iframes .

Godere!

— Andrii Verbytskyi
fonte

2

Questo ha funzionato come un fascino! Nessun'altra risposta qui funziona per ottenere l'intera altezza (compresa l'area scorrevole), tutti restituiscono solo l'altezza dell'area visibile.

— Martin Kristiansson,

Davvero eccezionale, mai pensato a questo. Immagino solo uno che lavora in phantomjs.

— MindlessRanger,

6

Il "metodo jQuery" per determinare la dimensione del documento - interroga tutto, prendi il valore più alto e spera per il meglio - funziona nella maggior parte dei casi, ma non in tutti .

Se hai davvero bisogno di risultati a prova di proiettile per le dimensioni del documento, ti suggerirei di usare jQuery.documentSize plugin . A differenza degli altri metodi, in realtà verifica e valuta il comportamento del browser quando viene caricato e, in base al risultato, richiede la proprietà corretta da lì in poi.

L'impatto di questo test una tantum sulle prestazioni è minimo e il plug-in restituisce i risultati giusti anche negli scenari più strani, non perché lo dico io, ma perché un'enorme suite di test generata automaticamente lo verifica effettivamente.

Poiché il plug-in è scritto in Javascript vanilla, puoi usarlo anche senza jQuery .

— hashchange
fonte

5

Ho mentito, jQuery restituisce il valore corretto per entrambe le pagine $ (documento) .height (); ... perché ne ho mai dubitato?

— Nic
fonte

1

Browser diversi, fratello.

— Jahrichie,

4

La risposta corretta per il 2017 è:

document.documentElement.getBoundingClientRect().height

A differenza di document.body.scrollHeightquesto metodo, tiene conto dei margini del corpo. Fornisce inoltre un valore di altezza frazionata, che può essere utile in alcuni casi

— torvin
fonte

1

Questi sono i risultati che ottengo quando provo il tuo metodo su questa pagina: i.imgur.com/0psVkIk.png Il tuo metodo restituisce qualcosa che assomiglia all'altezza della finestra, mentre document.body.scrollHeightelenca l'intera altezza scorrevole, che è la domanda originale.

— Marquizzo,

2

@Marquizzo è perché questa pagina ha html { height: 100% }in css. Quindi l'API restituisce correttamente l' altezza calcolata reale . Prova a rimuovere questo stile e anche ad aggiungere margini bodye vedrai qual è il problema con l'utilizzo document.body.scrollHeight.

— torvin,

C'è un errore in questo: dire ad esempio che c'è un <h1>elemento all'inizio <body>con il suo margine predefinito, spingerà l' <body>elemento verso il basso senza un modo per rilevarlo. document.documentElement.scrollHeight(non document.body,scrollHeight) è il modo più accurato di fare le cose.

— Ethan,

@Booligoosh non sono sicuro di cosa intendi. documentElement.scrollHeightfornisce un valore errato in questo caso. documentElement.getBoundingClientRect().heightdà quello corretto. dai un'occhiata a: jsfiddle.net/fLpqjsxd

— torvin

1

@torvin Fatto resta che non viene restituito il risultato desiderato getBoundingClientRect().height. Viene eliminato, mentre altri 3 (tre) metodi non vengono esclusi. Incluso quello che menzioni come inferiore ad esso. E insisti nel farlo suggerendo di rimuovere il 100% dall'altezza html di questa pagina e aggiungendo margini ad essa. Qual e il punto ? Accetta getBoundingClientRect().heightanche che non è a prova di proiettile.

— Rob Waa,

2

Per ottenere la larghezza in un browser / dispositivo utilizzare:

function getActualWidth() {
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;

    return actualWidth;
}

— user937284
fonte

11

stiamo parlando di altezza. non larghezza.

— Yash,

0

Per chiunque abbia problemi a scorrere una pagina su richiesta, utilizzando il rilevamento delle funzionalità, ho escogitato questo trucco per rilevare quale funzione utilizzare in uno scorrimento animato.

Il problema era entrambi document.body.scrollTope document.documentElementsempre restituito truein tutti i browser.

Tuttavia, puoi effettivamente scorrere un documento solo con l'uno o l'altro. d.body.scrollTopper Safari e document.documentElementper tutti gli altri secondo w3schools (vedi esempi)

element.scrollTop funziona in tutti i browser, non così per il livello del documento.

    // get and test orig scroll pos in Saf and similar 
    var ORG = d.body.scrollTop; 

    // increment by 1 pixel
    d.body.scrollTop += 1;

    // get new scroll pos in Saf and similar 
    var NEW = d.body.scrollTop;

    if(ORG == NEW){
        // no change, try scroll up instead
        ORG = d.body.scrollTop;
        d.body.scrollTop -= 1;
        NEW = d.body.scrollTop;

        if(ORG == NEW){
            // still no change, use document.documentElement
            cont = dd;
        } else {
            // we measured movement, use document.body
            cont = d.body;
        }
    } else {
        // we measured movement, use document.body
        cont = d.body;
    }

— YK
fonte

-1

utilizzare il codice di soffiaggio per l'altezza di calcolo + scorrimento

var dif = document.documentElement.scrollHeight - document.documentElement.clientHeight;

var height = dif + document.documentElement.scrollHeight +"px";

— Ali Bagheri
fonte

-1

Questo codice cross browser di seguito valuta tutte le possibili altezze degli elementi body e html e restituisce il massimo trovato:

            var body = document.body;
            var html = document.documentElement;
            var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight); // The max height of the body

Un esempio funzionante:

function getHeight()
{
  var body = document.body;
  var html = document.documentElement; 
  var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight);
  return bodyH;
}

document.getElementById('height').innerText = getHeight();

body,html
{
  height: 3000px;
}

#posbtm
{
  bottom: 0;
  position: fixed;
  background-color: Yellow;
}

<div id="posbtm">The max Height of this document is: <span id="height"></span> px</div>

example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />

Espandi frammento

— Willy Wonka
fonte

Spiegare la motivazione in caso di downvoting in modo che io possa correggere il punto. Grazie mille

— willy wonka,

-4

Non so determinare l'altezza in questo momento, ma puoi usarlo per mettere qualcosa sul fondo:

<html>
<head>
<title>CSS bottom test</title>
<style>
.bottom {
  position: absolute;
  bottom: 1em;
  left: 1em;
}
</style>
</head>

<body>

<p>regular body stuff.</p>

<div class='bottom'>on the bottom</div>

</body>
</html>

— jedihawk
fonte

1

Fidati di me, ho esaurito le risorse HTML e CSS su questo. Non posso spiegarlo ma vedrai i problemi se provi questo su quei siti.

— Nic

-4

Aggiungi riferimenti correttamente

Nel mio caso stavo usando una pagina ASCX e la pagina aspx che contiene il controllo ascx non sta usando correttamente i riferimenti. Ho appena incollato il seguente codice e ha funzionato:

<script src="../js/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../js/jquery-1.5.1.js" type="text/javascript"></script>

— Tosh
fonte