erkennen Fensterbreite und kompensieren Bildlaufleisten - Javascript

Question

Wie erkenne ich die Breite eines Benutzerfensters mit Javascript und Konto für ihre Bildlaufleiste? (Ich brauche die Breite des Bildschirms innerhalb der Bildlaufleiste). Hier ist, was ich habe ... es scheint, in mehreren Browsern zu arbeiten ... außer, dass es nicht für die Scrollbalken nicht erklären ..

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

irgendwelche Ideen? Ich brauche es in allen Browsern zu funktionieren;)

Answer 1

Sie finden die große Zusammenfassung der Eigenschaften, die auf welchen Browsern unterstützt werden on this page on quirksmode.org.

Ihre beste Wette ist wahrscheinlich ein Element in der Seite (mit document.body wo unterstützt oder document.getElementById oder was auch immer) zu greifen, zur offset Kette geht das oberste Element zu finden, untersuchen Sie anschließend das client und client des Elements.

Answer 2

Ich würde die "innere Breite" mit der Breite des Körpers vergleichen. Wenn die Körperbreite> innere Breite ist, dann sind Bildlaufleisten vorhanden.

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

Answer 3

A (ausgesprochen böse) Abhilfe, wenn Sie daran interessiert sind nur in der Breite sind, ist ein 1px x 100% div zu erstellen und seine offset verwenden. Funktioniert auf IE> = 7, FF, Chrome, Safari und Opera (Ich habe IE6 nicht ausprobiert, da wir an einem "You-Lucky-it-works-at-all-so-not-meckern" arbeiten -Render-Kuriositäten-Politik in diesen Tagen). Ich hänge die div off document.body mit den Attributen { position: 'absolute', top: '-1px', left: 0, width: '100%', height: '1px' }, Erstellen es das erste Mal, dass es benötigt wird.

Funktioniert, wenn Sie es aushalten können.

Answer 4

Fügen Sie einfach, dass vor dem window.innerWidth() überprüfen:

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

Answer 5

Eine andere Lösung, die Sie einige CSS versuchen können, verändert sich so Scrollen innerhalb Ihrer Seite geschieht, tut es anstelle des Browserfensters. Fügen Sie im Stil für body den Überlauf hinzu: auto. Jetzt enthält das body-Element die Bildlaufleiste. Wenn Sie also die Fensterbreite erhalten, messen Sie die Breite außerhalb des Scroll-Containers statt innerhalb des Bildlauf-Containers.

Dies fühlt sich wie eine mögliche Quelle der Eigenart und möglicherweise ein Problem mit der Zugänglichkeit, wenn Sie für eine breite Verwendung gehen möchten, möchten Sie es vielleicht sehr sorgfältig testen.

Answer 6

Dies ist, was ich getan habe - nur ein halbes Jahr in JavaScript zu lernen, so kann dies eine schlechte Lösung sein. Zuerst habe ich ein transparentes quadratisches Bild (10px x 10px), aber man könnte auch ein nicht-transparentes Bild erstellen und diese als
zu Ihrem JavaScript hinzufügen 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

Dies ist eine effizientere Version einer Idee hier von Tim Salai (ev Obwohl du gerade erst angefangen hast, war es genial, ein Element so in die untere rechte Ecke zu setzen.

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; 

Und hier ist eine modulare Version

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

Über die modulare Version:

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

Bonus:

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