rilevare larghezza della finestra e compensare le barre di scorrimento - Javascript

Question

Come faccio a rilevare la larghezza della finestra di un utente con Javascript e conto per la loro barra di scorrimento? (Ho bisogno la larghezza dello schermo all'interno della barra di scorrimento). Ecco quello che ho ... sembra di lavorare in più browser ... tranne che non tiene conto delle barre di scorrimento ..

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

tutte le idee? ho bisogno di lavorare in tutti i browser;)

Answer 1

Troverete la grande sintesi di ciò che le proprietà sono supportate su ciò che i browser in questa pagina su quirksmode. org .

La cosa migliore è probabilmente quello di afferrare un elemento della pagina (utilizzando document.body dove supportato, o document.getElementById o qualsiasi altra cosa), a piedi, la sua catena offsetParent di trovare l'elemento più in alto, quindi esaminare clientWidth che dell'elemento e clientHeight.

Answer 2

A (marcato brutta) soluzione se siete interessati solo la larghezza è di creare un div 1px x 100% e usare il suo offsetWidth. Funziona su IE> = 7, FF, Chrome, Safari e Opera (non ho provato IE6, mentre stiamo lavorando per un tu sei-fortunato-it-opere-a-tutto-so-non-si lamentano giù di lì di politica in questi giorni)-stranezze -circa-rendering. Appendo il div off document.body con gli attributi { position: 'absolute', top: '-1px', left: 0, width: '100%', height: '1px' }, creando la prima volta è necessario.

funziona se potete stomaco esso.

Answer 3

Basta aggiungere che prima della window.innerWidth () verificare:

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

Answer 4

Questo è quello che ho fatto - solo un anno e mezzo in apprendimento JavaScript, quindi questo potrebbe essere una cattiva soluzione. In primo luogo, ho creato un trasparente (10px x 10px) un'immagine quadrata, ma si potrebbe anche creare un'immagine non trasparente e aggiungere questo alla tua JavaScript come
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 5

Questa è una versione più efficiente di un'idea postato qui da Tim Salai (anche se sono solo all'inizio, è stato brillante per inserire un elemento in basso a destra del genere).

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;

E qui è una versione modulare

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

Utilizzare la versione modulare:

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

caratteristica Bonus:

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

Answer 6

Vorrei confrontare il "innerWidth" per la larghezza del corpo. Se la larghezza del corpo> innerWidth, quindi barre di scorrimento sono presenti.

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

Answer 7

Un'altra soluzione si può provare sta cambiando un po 'di CSS in modo scorrimento avviene all'interno della pagina, invece della finestra del browser farlo. Nello stile per il corpo, aggiungere overflow: auto. Ora l'elemento del corpo comprende la barra di scorrimento, in modo che quando si ottiene la larghezza della finestra si sta misurando la larghezza di fuori del contenitore di scorrimento invece che all'interno di esso.

Questo si sente come una potenziale fonte di eccentricità, e forse un problema di accessibilità, quindi se si sta andando per l'uso diffuso si potrebbe desiderare di provarlo molto attentamente.