jquery $ (window) .height () đang trả về chiều cao tài liệu


104

Tôi chắc chắn rằng có một lỗi đơn giản tôi đang mắc phải, nhưng tôi chỉ đơn giản là cảnh báo $(window).height()và nó trả về cùng một giá trị $(document).height().

Tôi đang có bằng MBA 13 "và chiều cao cửa sổ trên trình duyệt của tôi khi được tối đa hóa trong khoảng từ 780px - 820px (khoảng) nhưng mỗi lần chiều cao cửa sổ trả về giống với chiều cao tài liệu. Trong mọi trường hợp trên trang web tôi đang làm việc là trên 1000px.

Chuyện gì đang xảy ra ở đây?

alert($(window).height());
alert($(document).height()); 

bạn đang làm việc trên trình duyệt nào?
Kanishka Panamaldeniya

Sự cố này bắt đầu xuất hiện với jquery-1.8.0, các phiên bản cũ hơn của jquery đã thực hiện điều này một cách chính xác (ngay cả khi không có bộ DOCTYPE)
ralhei

Câu trả lời:


245

Không có doctypethẻ, Chrome báo cáo cùng một giá trị cho cả hai cuộc gọi.

Việc thêm loại tài liệu nghiêm ngặt như <!DOCTYPE html>sẽ khiến các giá trị hoạt động như được quảng cáo.

Các doctypethẻ phải là rất Điều đầu tiên trong tài liệu của bạn. Ví dụ: bạn không thể có bất kỳ văn bản nào trước nó, ngay cả khi nó không hiển thị bất kỳ thứ gì.


11
FireFox cũng thực hiện báo cáo này, trừ khi bạn sử dụng một loại tài liệu được chặt chẽ như <DOCTYPE HTML!>
Tom Chiverton

Ngoài ra, loại tài liệu không chính xác làm cho twitter bootstrap scrollspy hoạt động kỳ lạ vì cùng một lý do mà $ (window) .height () trả về chiều cao tài liệu.
nidheeshdas

3
Trong trường hợp của tôi, tôi có một Response.Writemã của mình đằng sau trên một trang web ASP đang xuất ra 1trước bất kỳ HTML nào. Vì vậy, loại tài liệu của tôi là đúng, nhưng không phải là thứ đầu tiên trên trang, về mặt kỹ thuật.
James

1
tôi gặp vấn đề tương tự nhưng loại tài liệu được khai báo chính xác :(
bia.migueis. 14/09/15

1
" Thẻ doctype phải là thứ đầu tiên trong tài liệu của bạn. Ví dụ: bạn không thể có bất kỳ mã php nào trước nó, ngay cả khi nó không hiển thị bất kỳ thứ gì. " Trình duyệt không biết máy chủ đang chạy gì, nó chỉ nhận được một tệp văn bản có đánh dấu HTML. Điều gì sẽ xảy ra nếu bạn đang chạy IIS chứ không phải Apache? Trình duyệt không quan tâm máy chủ đang làm gì.
Sablefoste

24

Tôi đã gặp vấn đề tương tự, và sử dụng điều này đã giải quyết được nó.

var w = window.innerWidth;
var h = window.innerHeight;

1
thật kỳ lạ, tôi cũng đang sử dụng loại tài liệu thích hợp. nội tâm của bạn đã khắc phục sự cố của tôi! Cảm ơn
Martijn van Hoof

1
Cùng một vấn đề - có loại tài liệu hợp lệ và tất cả. Hơi nhiều nền tảng: var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
melanie johnson

thực sự sửa chữa các vấn đề (và vâng Tôi có một DOCTYPE - Điều đầu tiên trên mỗi trang)
hillcode

1

Tôi nghĩ rằng tài liệu của bạn phải có đủ không gian trong cửa sổ để hiển thị nội dung của nó. Điều đó có nghĩa là không cần phải cuộn xuống để xem thêm bất kỳ phần nào của tài liệu. Trong trường hợp đó, chiều cao tài liệu sẽ bằng chiều cao cửa sổ.


Tài liệu kéo dài bên dưới cuối cửa sổ trong mỗi trang.
Fraser

0

Đây là câu hỏi và câu trả lời cho vấn đề này: Sự khác biệt giữa screen.availHeight và window.height ()

Có cả những bức ảnh, vì vậy bạn thực sự có thể thấy sự khác biệt. Hi vọng điêu nay co ich.

Về cơ bản, $(window).height()cung cấp cho bạn chiều cao tối đa bên trong cửa sổ trình duyệt (khung nhìn) và $(document).height()cung cấp cho bạn chiều cao của tài liệu bên trong trình duyệt. Hầu hết thời gian, chúng sẽ giống hệt nhau, ngay cả với thanh cuộn.


0

Nó thực sự hoạt động nếu chúng ta sử dụng Doctype trên trang web của mình jquery (cửa sổ) sẽ trả về chiều cao khung nhìn, nếu không nó sẽ trả về chiều cao tài liệu hoàn chỉnh.

Xác định thẻ sau trên đầu trang web của bạn: <!DOCTYPE html>


sử dụng thẻ này trên trang web của bạn: <! DOCTYPE html!>
Gourav Yadav
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.