Cập nhật cho năm 2017
Câu trả lời ban đầu của tôi được viết vào năm 2009. Trong khi nó vẫn hoạt động, tôi muốn cập nhật nó cho năm 2017. Trình duyệt vẫn có thể hoạt động khác đi. Tôi tin tưởng nhóm jQuery sẽ làm tốt công việc duy trì tính nhất quán giữa các trình duyệt. Tuy nhiên, không cần thiết phải bao gồm toàn bộ thư viện. Trong nguồn jQuery, phần có liên quan được tìm thấy trên dòng 37 của width.js . Ở đây nó được trích xuất và sửa đổi để hoạt động độc lập:
function getWidth() {
return Math.max(
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
);
}
function getHeight() {
return Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.documentElement.clientHeight
);
}
console.log('Width: ' + getWidth() );
console.log('Height: ' + getHeight() );
Câu trả lời gốc
Vì tất cả các trình duyệt hoạt động khác nhau, trước tiên bạn cần kiểm tra các giá trị và sau đó sử dụng chính xác. Đây là một chức năng làm điều này cho bạn:
function getWidth() {
if (self.innerWidth) {
return self.innerWidth;
}
if (document.documentElement && document.documentElement.clientWidth) {
return document.documentElement.clientWidth;
}
if (document.body) {
return document.body.clientWidth;
}
}
và tương tự cho chiều cao:
function getHeight() {
if (self.innerHeight) {
return self.innerHeight;
}
if (document.documentElement && document.documentElement.clientHeight) {
return document.documentElement.clientHeight;
}
if (document.body) {
return document.body.clientHeight;
}
}
Gọi cả hai trong số các kịch bản của bạn bằng cách sử dụng getWidth()
hoặc getHeight()
. Nếu không có thuộc tính gốc nào của trình duyệt được xác định, nó sẽ trả về undefined
.