detectar el ancho de la ventana y compensar las barras de desplazamiento - Javascript

Question

¿Cómo puedo detectar el ancho de la ventana de un usuario con Javascript y la cuenta para su barra de desplazamiento? (Necesito el ancho de la pantalla DENTRO de la barra de desplazamiento). Aquí es lo que tengo ... que parece que funciona en varios navegadores ... excepto que no tiene en cuenta las barras de desplazamiento ..

function browserWidth() { 
    var myWidth = 0; 
    if(typeof(window.innerWidth) == 'number') { 
    //Non-IE 
    myWidth = window.innerWidth; 
    } else if(document.documentElement && document.documentElement.clientWidth) { 
    //IE 6+ in 'standards compliant mode' 
    myWidth = document.documentElement.clientWidth; 
    } else if(document.body && document.body.clientWidth) { 
    //IE 4 compatible 
    myWidth = document.body.clientWidth; 
    } 
    return myWidth; 
} 

alguna idea? Necesito que funcione en todos los navegadores;)

Answer 1

Encontrará el gran resumen de las propiedades admitidas en qué navegadores on this page on quirksmode.org.

Su mejor opción es probablemente agarrar un elemento en la página (usando document.body where supported, o document.getElementById o lo que sea), recorrer su cadena offsetParent para encontrar el elemento superior, luego examinar clientWidth y customerHeight de ese elemento.

Answer 2

Compararía el "ancho interno" con el ancho del cuerpo. Si el ancho del cuerpo> ancho interno, entonces las barras de desplazamiento están presentes.

if (browserWidth() < document.body.offsetWidth) { 
    doSomething(); 
} 

Answer 3

A (notablemente desagradable) solución si está interesado sólo en el ancho es crear un div 1px x 100% y utilizar su offsetWidth. Funciona en IE> = 7, FF, Chrome, Safari y Opera (no he probado IE6, ya que estamos trabajando para un tipo "suertudo-funciona-en-todo-así-no-se queje" -acerca de las políticas de renderización de rarezas en estos días). Cuelgo el div de document.body con los atributos { position: 'absolute', top: '-1px', left: 0, width: '100%', height: '1px' }, creándolo la primera vez que es necesario.

Funciona si puedes soportarlo.

Answer 4

añadir que antes de la window.innerWidth() controlar:

if (typeof(document.body.clientWidth) == 'number') { 
    // newest gen browsers 
    width = document.body.clientWidth; 
    height = document.body.clientHeight; 
} 

Answer 5

Otra solución puede probar un poco de CSS está cambiando de modo de desplazamiento que ocurre dentro de su página, en lugar de la ventana del navegador haciéndolo. En el estilo para el cuerpo, agregue desbordamiento: automático. Ahora el elemento del cuerpo incluye la barra de desplazamiento, por lo que cuando obtienes el ancho de la ventana, estás midiendo el ancho fuera del contenedor de desplazamiento en lugar de dentro.

Esto se siente como una fuente potencial de extravagancia, y posiblemente un problema de accesibilidad, por lo que si va a utilizarlo ampliamente, es posible que desee probarlo con bastante cuidado.

Answer 6

Esto es lo que hice, solo medio año para aprender JavaScript, por lo que esta puede ser una mala solución. En primer lugar, he creado una imagen cuadrada transparente (10px x 10px), pero también se puede crear una imagen no transparente y añadir esto a su JavaScript como
document.getElementById('getDimensions').style.visibility = "hidden";

HTML:

<img id="getDimensions" src="images/aSmallBox.png" alt="A small transparent image 
meant to determine the dimensions of the viewport" width="10px" height="10px"/> 

JavaScript:

//Inside function called by window.onload event handler (could go in CSS file, but 
//better to keep it with other related code in JS file) 
document.getElementById('getDimensions').style.position = "fixed"; 
document.getElementById('getDimensions').style.bottom = "0px"; 
document.getElementById('getDimensions').style.right = "0px"; 

//Everything below inside function called by window.onresize event handler 
var baseWidthCalculation = document.getElementById('getDimensions').offsetLeft; 
var baseHeightCalculation = document.getElementById('getDimensions').offsetTop; 
    //Account for the dimensions of the square img element (10x10) 
var viewportWidth = baseWidthCalculation + 10; 
var viewportHeight = baseHeightCalculation + 10; 

Answer 7

Esta es una versión más eficiente de una idea publicada aquí por Tim Salai (ev Aunque está empezando, fue genial colocar un elemento en la esquina inferior derecha así).

var getDimensions = document.createElement("div"); 
getDimensions.setAttribute("style", 
      "visibility:hidden;position:fixed;bottom:0px;right:0px;"); 
document.getElementsByTagName("body")[0].appendChild(getDimensions); 
var viewportWidth = getDimensions.offsetLeft; 
var viewportHeight = getDimensions.offsetTop; 

Y aquí es una versión modular

var PageDimensions = function(){ 
var Width; 
var Height;  

function pagedimensionsCtor(){ 
    var getDimensions = document.createElement("div"); 
    getDimensions.setAttribute("style" , 
     "visibility:hidden;position:fixed;bottom:0px;right:0px;"); 
    document.getElementsByTagName("body")[0].appendChild(getDimensions); 
    Width = getDimensions.offsetLeft; 
    Height = getDimensions.offsetTop; 
    getDimensions.parentNode.removeChild(getDimensions); 
} 
pagedimensionsCtor(); 

function Reset(){ 
    pagedimensionsCtor(); 
}  

function GetPageHeight(){ 
    return Height; 
} 

function GetPageWidth(){ 
    return Width; 
} 

return{ 
    Reset: Reset, 
    GetPageHeight: GetPageHeight, 
    GetPageWidth: GetPageWidth 
}; 
} 

Use la versión modular: función

var page = new PageDimensions(); 
console.log("viewportWidth: " + page.GetPageWidth() + " viewportHeight: " + page.GetPageHeight()); 

Bono:

page.Reset();//just in case you think your dimensions have changed