Comment obtenir la hauteur du document entier avec JavaScript ?

Question

Comment obtenir la hauteur du document entier avec JavaScript ?

Demandé el 17 de Juillet, 2009: Quand la question a-t-elle été
72842 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Dans certains documents, je n'arrive pas à obtenir la hauteur du document (pour positionner quelque chose absolument tout en bas). De plus, un padding-bottom on semble ne rien faire sur ces pages, mais faire sur les pages où la hauteur sera retournée. Cas concret(s) :

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

Sur Fandango
La méthode de jQuery $(document).height(); renvoie une valeur correcte
document.height retourne 0
document.body.scrollHeight retourne 0

Sur Paperback Swap :
La méthode de jQuery $(document).height(); Erreur de type : $(document) est nul
document.height renvoie une valeur incorrecte
document.body.scrollHeight renvoie une valeur incorrecte

Note : J'ai des autorisations au niveau du navigateur, s'il y a une astuce.

Demandé el 17 de Juillet, 2009 par Nic

5 votes

$(document) est nul car ce site n'a pas chargé jQuery...

Commenté el 17 de Juillet, 2009 par James

0 votes

Hm, j'aurais juré avoir vérifié quelque chose d'autre pour confirmer que jQuery était bien enregistré mais il ne semble pas que je l'ai fait, HA ! Je pensais que firebug avait jQuery emballé... hm, je suppose que je vais vérifier ceci alors si c'est une solution.

Commenté el 18 de Juillet, 2009 par Nic

4 votes

Firebug ne dispose pas de jQUery packagé

Commenté el 23 de Août, 2012 par Pathachiever11

Afficher 1 autres commentaires

Answer 1

5 Réponses

Answer 2

743voto

Borgar Points 12493

La taille des documents est un cauchemar pour la compatibilité des navigateurs car, bien que tous les navigateurs exposent les propriétés clientHeight et scrollHeight, ils ne sont pas tous d'accord sur la façon dont les valeurs sont calculées.

Il existait autrefois une formule complexe des meilleures pratiques pour tester la hauteur/largeur correcte. Il s'agissait d'utiliser les propriétés document.documentElement si elles étaient disponibles ou de se rabattre sur les propriétés du document, etc.

La façon la plus simple d'obtenir une hauteur correcte est de récupérer toutes les valeurs de hauteur trouvées sur le document, ou documentElement, et d'utiliser la plus élevée. C'est en gros ce que fait jQuery :

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

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

Un test rapide avec Firebug + bookmarklet jQuery renvoie la hauteur correcte pour les deux pages citées, tout comme l'exemple de code.

Notez que si vous testez la hauteur du document avant qu'il ne soit prêt, vous obtiendrez toujours un résultat de 0. De plus, si vous chargez d'autres éléments, ou si l'utilisateur redimensionne la fenêtre, vous devrez peut-être refaire le test. Utilisez onload ou un document prêt si vous en avez besoin au moment du chargement, sinon, il suffit de tester chaque fois que vous avez besoin du numéro.

Répondu el 18 de Juillet, 2009 par Borgar (12493 Points )

2 votes

Ratez cette solution, parce qu'elle fonctionne lorsque vous utilisez la bibliothèque prototype, avec jQuery il n'y a pas ce problème

Commenté el 29 de Septembre, 2009 par se_pavel

11 votes

Lorsque vous travaillez avec des iframes et jquery, grâce à cette méthode de calcul, la hauteur du document de l'iframe sera toujours au moins égale à la hauteur de l'iframe elle-même. Il est important de le noter lorsque vous souhaitez réduire la hauteur de l'iframe pour l'adapter au contenu. Vous devez d'abord réinitialiser la hauteur de l'iframe.

Commenté el 30 de Novembre, 2009 par David Lay

3 votes

J'ai eu besoin d'agrandir et de réduire l'iframe (application facebook) et j'ai trouvé que document.body.offsetHeight était le meilleur choix pour moi, supporté avec précision par la plupart des navigateurs.

Commenté el 3 de Août, 2012 par JeffG

Afficher 14 autres commentaires

Answer 3

29voto

john locke Points 1666

Vous pouvez même utiliser ça :

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 );
}

ou d'une manière plus jQuery (puisque comme vous l'avez dit jQuery ne ment pas) :)

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

Répondu el 7 de Février, 2013 par john locke (1666 Points )

Answer 4

5voto

Nic Points 297

J'ai menti, jQuery renvoie la valeur correcte pour les deux pages $(document).height() ;... pourquoi en ai-je douté ?

Répondu el 17 de Juillet, 2009 par Nic (297 Points )

1 votes

Des navigateurs différents, mon frère.

Commenté el 25 de Février, 2015 par jahrichie

Answer 5

-4voto

santosh Points 31

Ajouter des références correctement

Dans mon cas, j'utilisais une page ASCX et la page aspx qui contient le contrôle ascx n'utilise pas les références correctement. J'ai simplement collé le code suivant et cela a fonctionné :

<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>

Répondu el 17 de Mars, 2014 par santosh (31 Points )

Answer 6

-4voto

jedihawk Points 321

Je ne sais pas comment déterminer la hauteur pour l'instant, mais vous pouvez utiliser ceci pour mettre quelque chose sur le fond :

<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>

Répondu el 17 de Juillet, 2009 par jedihawk (321 Points )

1 votes

Croyez-moi, j'ai épuisé les ressources HTML et CSS sur ce point. Je ne peux pas l'expliquer mais vous verrez les problèmes si vous essayez sur ces sites.

Commenté el 18 de Juillet, 2009 par Nic

Comment obtenir la hauteur du document entier avec JavaScript ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment obtenir la hauteur du document entier avec JavaScript ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: