Tôi đang tìm đoạn mã để có được chiều cao của khu vực có thể xem trong cửa sổ trình duyệt.JavaScript - Nhận Chiều cao Trình duyệt
Tôi đã có mã này, tuy nhiên nó có phần bị lỗi như thể cơ thể không vượt quá chiều cao của cửa sổ sau đó nó trở lại ngắn.
document.body.clientHeight;
Tôi đã thử một vài thứ khác nhưng chúng trả về NaN hoặc có cùng chiều cao như trên.
Có ai biết cách nhận chiều cao thực của cửa sổ duyệt không?
Bạn sẽ muốn một cái gì đó như thế này, lấy từ http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
function alertSize() {
var myWidth = 0, myHeight = 0;
if(typeof(window.innerWidth) == 'number') {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
window.alert('Width = ' + myWidth);
window.alert('Height = ' + myHeight);
}
Vì vậy, đó là innerHeight cho các trình duyệt hiện đại, documentElement.clientHeight cho IE, body.clientHeight cho bị phản đối/quirks.
Bạn có thể sử dụng window.innerHeight
-1 Điều này không được Internet Explorer hỗ trợ. – staticbeast
Chúng tôi không cần hỗ trợ Internet Explorer :) Nếu bạn phải, hãy thử document.documentElement.clientHeight hoặc sử dụng jquery thay thế. – honestduane
Tôi không cần phải hỗ trợ tức là lol –
Điều này cũng hoạt động. Đầu tiên tạo một phần tử div tuyệt đối với tuyệt đối vị trí và 100% height:
<div id="h" style="position:absolute;top:0;bottom:0;"></div>
Sau đó, có được chiều cao cửa sổ từ yếu tố mà qua offsetHeight
var winHeight = document.getElementById('h').offsetHeight;
có thể gây ra thanh cuộn – stuartdotnet
Hãy thử sử dụng jquery:
window_size = $(window).height();
Cách mà tôi thích làm là như thế này với nhiệm vụ ba năm.
var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth;
var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;
Tôi có thể chỉ ra rằng, nếu bạn chạy điều này trong ngữ cảnh chung từ điểm đó, bạn có thể sử dụng window.height và window.width.
Hoạt động trên IE và các trình duyệt khác theo như tôi biết (Tôi chỉ thử nghiệm trên IE11).
Siêu sạch và, nếu tôi không nhầm, hiệu quả.
Tôi quan tâm để biết nếu có lý do kỹ thuật tại sao mẫu 'var width = window.innerWidth || window.clientWidth; 'không được sử dụng. –
Lý do đầu tiên là chỉ một trong hai thuộc tính được xác định, tùy thuộc vào loại trình duyệt được sử dụng. Đối với lý do tại sao không chỉ sử dụng toán tử kết hợp, về mặt kỹ thuật nên được sử dụng khi các mục được xác định, nhưng một trong số chúng có thể là một số giá trị sai. Chrome đủ thông minh để vẫn đưa ra một giá trị, nhưng ít nhất là trong lịch sử, Firefox sẽ phàn nàn rằng biến đầu tiên không tồn tại. Không chắc bây giờ, nhưng đó là lý do tại sao. – techdude
Ok, chỉ để tham khảo, tôi đã thử nghiệm điều này trong các phiên bản mới nhất của Firefox, Chrome, Safari và IE Edge. Sử dụng coalesce trên các biến không xác định hoạt động tốt, vì vậy có vẻ như vấn đề đó đã được sửa. Vì vậy, với ý nghĩ đó, lý do duy nhất bạn muốn sử dụng các câu lệnh ternary trên biểu mẫu kết hợp là vì các lý do kiểu cá nhân, hoặc vì vậy bạn có thể hỗ trợ các trình duyệt cũ hơn. Hãy ghi nhớ rằng khi viết bài này, chúng tôi phải hỗ trợ IE6 và FF3, và nếu tôi phải đoán, tôi sẽ nói đó là FF3 có vấn đề với cú pháp kết hợp. – techdude
Tôi thích cách tôi chỉ tìm ra ... Không JS ... 100% HTML & CSS:.
(Sẽ tập trung một cách hoàn hảo ở giữa, không phụ thuộc vào kích thước nội dung
HTML FILE
<html><head>
<link href="jane.css" rel="stylesheet" />
</head>
<body>
<table id="container">
<tr>
<td id="centerpiece">
123
</td></tr></table>
</body></html>
CSS FILE
#container{
border:0;
width:100%;
height:100%;
}
#centerpiece{
vertical-align:middle;
text-align:center;
}
để căn giữa hình ảnh/div được giữ trong td, bạn có thể muốn thử lề: tự động; và chỉ định thứ nguyên div thay thế. -Tuy nhiên, nói rằng ... thuộc tính 'text-align' sẽ căn chỉnh nhiều hơn chỉ là một phần tử văn bản đơn giản.
Phiên bản JavaScript trong trường hợp nếu jQuery không phải là một tùy chọn.
window.screen.availHeight
var winWidth = window.screen.width;
var winHeight = window.screen.height;
document.write(winWidth, winHeight);
Tốt nhất là bao gồm một số giải thích về câu trả lời của bạn cùng với bất kỳ mã nào, để cung cấp ngữ cảnh cho bất kỳ khách truy cập nào trong tương lai cho câu hỏi này –
Có một cách đơn giản hơn một bó toàn bộ nếu phát biểu. Sử dụng toán tử hoặc (||).
function getBrowserDimensions() {
return {
width: (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth),
height: (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight)
};
}
var browser_dims = getBrowserDimensions();
alert("Width = " + browser_dims.width + "\nHeight = " + browser_dims.height);
Với JQuery bạn có thể thử này $(window).innerHeight() (Hoạt động với tôi trên Chrome, FF và IE). Với phương thức bootstrap tôi đã sử dụng một cái gì đó như sau;
$('#YourModal').on('show.bs.modal', function() {
$('.modal-body').css('height', $(window).innerHeight() * 0.7);
});
Kiểm tra [chủ đề SO này] (http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript). – Vinz
@ Jason xin vui lòng chọn câu trả lời của techdude. –