JavaScript - Obtenga la altura del navegador

Estoy buscando un fragmento de código para obtener el alto del área visible dentro de una ventana del navegador.JavaScript - Obtenga la altura del navegador

Tenía este código, sin embargo, está algo molesto, como si el cuerpo no superara la altura de la ventana, entonces se queda corto.

document.body.clientHeight;

He intentado un par de otras cosas, pero o bien devuelven NaN o la misma altura que la anterior.

¿Alguien sabe cómo obtener la altura real de la ventana de navegación?

Fuente

2010-07-26 JasonS

Compruebe [este subproceso SO] (http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript). – Vinz

@JasonS por favor elija la respuesta de techdude. –

querrás algo como esto, tomado de http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

function alertSize() { 
    var myWidth = 0, myHeight = 0; 
    if(typeof(window.innerWidth) == 'number') { 
    //Non-IE 
    myWidth = window.innerWidth; 
    myHeight = window.innerHeight; 
    } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { 
    //IE 6+ in 'standards compliant mode' 
    myWidth = document.documentElement.clientWidth; 
    myHeight = document.documentElement.clientHeight; 
    } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) { 
    //IE 4 compatible 
    myWidth = document.body.clientWidth; 
    myHeight = document.body.clientHeight; 
    } 
    window.alert('Width = ' + myWidth); 
    window.alert('Height = ' + myHeight); 
}

Así que eso es innerHeight para navegadores modernos, documentElement.clientHeight para IE, body.clientHeight para desuso/peculiaridades.

Fuente

2010-07-26 08:39:49

Puede utilizar el window.innerHeight

Fuente

2010-07-26 08:42:25

-1 Esto no es compatible con Internet Explorer. – staticbeast

+18

No necesitamos admitir Internet Explorer :) Si debe hacerlo, intente document.documentElement.clientHeight o use jquery. – honestduane

No necesito admitir es decir, lol –

Esto si funciona también. En primer lugar crear un elemento div absoluta con la posición y el 100% absoluto altura:

<div id="h" style="position:absolute;top:0;bottom:0;"></div>

A continuación, obtener la altura de la ventana de ese elemento a través de offsetHeight

var winHeight = document.getElementById('h').offsetHeight;

Fuente

2013-03-09 03:14:22

puede causar barras de desplazamiento – stuartdotnet

Trate de usar jQuery:

window_size = $(window).height();

Fuente

2013-03-15 19:43:13

La forma en que me gusta hacerlo es así con una asignación ternaria.

var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth; 
var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;

podría señalar que, si ejecuta esto en el contexto global que a partir de ese momento se podría utilizar window.height y window.width.

Funciona en IE y otros navegadores hasta donde yo sé (solo lo he probado en IE11).

Super clean y, si no me equivoco, eficiente.

Fuente

2014-01-09 17:06:52 techdude

Me interesa saber si existe una razón técnica por la cual el patrón 'var width = window.innerWidth || window.clientWidth; 'no se utiliza. –

Bueno, la primera razón es que solo se define una de las dos propiedades, dependiendo del tipo de navegador utilizado. En cuanto a por qué no se usa simplemente el operador de fusión, técnicamente se debe usar cuando se definen los elementos, pero uno de ellos podría tener algún valor falso. Chrome es lo suficientemente inteligente como para dar un valor, pero al menos históricamente, Firefox se quejaría de que la primera variable no existe. No estoy seguro de cómo es ahora, pero esa es la razón por la cual. – techdude

Ok, solo como referencia, probé esto en las últimas versiones de Firefox, Chrome, Safari e IE Edge. Usar coalesce en variables indefinidas funciona bien, por lo que parece que ese problema se ha solucionado. Entonces, con eso en mente, la única razón por la que preferiría usar declaraciones ternarias sobre la forma de fusión es por razones de estilo personal, o para que pueda admitir navegadores más antiguos. Tenga en cuenta que cuando se escribió este andwer, teníamos que admitir IE6 y FF3, y si tenía que adivinar, diría que fue FF3 el que tuvo el problema con la sintaxis de fusión. – techdude

prefiero la manera que acabo de descubrir ... No se ... JS 100% HTML & CSS:.

(se centrará perfectamente en el medio, sin importar el tamaño del contenido

ARCHIVO HTML

<html><head> 
<link href="jane.css" rel="stylesheet" /> 
</head> 
<body> 
<table id="container"> 
<tr> 
<td id="centerpiece"> 
123 
</td></tr></table> 
</body></html>

CSS ARCHIVO

#container{ 
    border:0; 
    width:100%; 
    height:100%; 
} 
#centerpiece{ 
    vertical-align:middle; 
    text-align:center; 
}

para centrar imágenes/div en el td, puede intentar marginar: automático; y especifica una dimensión div en su lugar. -Pero, diciendo que ... la propiedad 'text-align' alineará mucho más que un simple elemento de texto.

Fuente

2014-07-24 11:56:53

Versión de JavaScript en caso de que jQuery no sea una opción.

window.screen.availHeight

Fuente

2014-07-24 19:54:00

var winWidth = window.screen.width; 
var winHeight = window.screen.height; 

document.write(winWidth, winHeight);

Fuente

2014-08-25 20:35:01 FrEaKi

Lo mejor es incluir alguna explicación de su respuesta junto con cualquier código, para dar contexto a cualquier visitante futuro a esta pregunta –

Hay una manera más simple que un montón de sentencias if. Use el operador o (||).

function getBrowserDimensions() { 
    return { 
    width: (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth), 
    height: (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) 
    }; 
} 

var browser_dims = getBrowserDimensions(); 

alert("Width = " + browser_dims.width + "\nHeight = " + browser_dims.height);

Fuente

2014-12-23 00:41:41

con jQuery puede probar esta $(window).innerHeight() (Obras para mí en Chrome, IE y FF). Con el modo bootstrap usé algo como lo siguiente;

$('#YourModal').on('show.bs.modal', function() { 
    $('.modal-body').css('height', $(window).innerHeight() * 0.7); 
});

Fuente

2016-02-10 20:19:17 Mahib

JavaScript - Obtenga la altura del navegador

Respuesta

Cuestiones relacionadas