phát hiện chiều rộng cửa sổ và bù cho thanh cuộn - Javascript

Question

Làm cách nào để phát hiện chiều rộng cửa sổ của người dùng bằng Javascript và tài khoản cho thanh cuộn của họ? (Tôi cần chiều rộng của màn hình INSIDE của thanh cuộn). Đây là những gì tôi có ... có vẻ như nó hoạt động trong nhiều trình duyệt ... ngoại trừ việc nó không giải thích cho các thanh cuộn ..

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

bất kỳ ý tưởng nào? tôi cần nó để làm việc trong tất cả các trình duyệt;)

Answer 1

Bạn sẽ tìm thấy bản tóm tắt lớn về những thuộc tính nào được hỗ trợ trên trình duyệt nào on this page on quirksmode.org. Đặt cược tốt nhất của bạn có lẽ là lấy một phần tử trong trang (sử dụng document.body nơi được hỗ trợ, hoặc document.getElementById hoặc bất kỳ thứ gì), đi bộ chuỗi offsetParent của nó để tìm phần tử trên cùng, sau đó kiểm tra clientWidth và clientHeight của phần tử đó.

Answer 2

Tôi sẽ so sánh "innerWidth" với chiều rộng của phần thân. Nếu chiều rộng cơ thể> innerwidth, thì thanh cuộn có mặt.

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

Answer 3

Giải pháp tạm thời (khó chịu) nếu bạn chỉ quan tâm đến chiều rộng là tạo 1px x 100% div và sử dụng bù đắpWidth. Hoạt động trên IE> = 7, FF, Chrome, Safari và Opera (Tôi đã không thử IE6, vì chúng tôi đang làm việc với một bạn may mắn-it-work-at-all-so-don-complain -xác định chính sách kỳ quặc-rendering-oddities những ngày này). Tôi treo div ra khỏi document.body với các thuộc tính { position: 'absolute', top: '-1px', left: 0, width: '100%', height: '1px' }, tạo nó lần đầu tiên cần thiết.

Hoạt động nếu bạn có thể no bụng.

Answer 4

Chỉ cần thêm rằng trước khi window.innerWidth() kiểm tra:

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

Answer 5

Một giải pháp bạn có thể thử thay đổi một số CSS để di chuyển xảy ra trong trang của bạn, thay vì cửa sổ trình duyệt làm việc đó. Trong phong cách cho cơ thể, thêm tràn: tự động. Bây giờ phần tử cơ thể bao gồm thanh cuộn, vì vậy khi bạn có chiều rộng cửa sổ, bạn đang đo chiều rộng bên ngoài vùng chứa cuộn thay vì bên trong nó.

Điều này cảm thấy giống như một nguồn tiềm ẩn của quirkiness, và có thể là một vấn đề khả năng tiếp cận, vì vậy nếu bạn đang đi để sử dụng rộng rãi, bạn có thể muốn kiểm tra nó khá cẩn thận.

Answer 6

Đây là những gì tôi đã làm - chỉ nửa năm học JavaScript, vì vậy đây có thể là một sự cố không tốt. Trước tiên, tôi đã tạo ra một hình ảnh vuông trong suốt (10px x 10px), nhưng bạn cũng có thể tạo ra một hình ảnh không trong suốt và thêm video này vào JavaScript như
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

Đây là phiên bản hiệu quả hơn của ý tưởng được đăng tại đây bởi Tim Salai (ev vi dù bạn mới bắt đầu, thật tuyệt vời khi đặt một phần tử ở góc dưới cùng bên phải như thế).

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; 

Và đây là một phiên bản mô-đun

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

Sử dụng phiên bản mô-đun:

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

Bonus tính năng:

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