Szukam fragmentu kodu, aby uzyskać wysokość widocznego obszaru w oknie przeglądarki.JavaScript - Uzyskaj wysokość przeglądarki
Posiadałem ten kod, jednak jest on nieco błędny, tak jakby ciało nie przekraczało wysokości okna, a następnie wraca na krótko.
document.body.clientHeight;
Próbowałem kilka innych rzeczy, ale albo zwracają NaN lub wysokość tego samego powyżej.
Czy ktoś wie, jak uzyskać rzeczywistą wysokość okna przeglądarki?
będziemy chcieli coś takiego, wykonane z 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);
}
Więc to innerHeight dla nowoczesnych przeglądarek documentElement.clientHeight dla IE, body.clientHeight dla nieaktualnych/dziwactw.
Można użyć window.innerHeight
-1 To nie jest obsługiwane przez Internet Explorer. – staticbeast
Nie musimy obsługiwać przeglądarki Internet Explorer :) Jeśli musisz, spróbuj document.documentElement.clientHeight lub użyj jquery. – honestduane
Nie muszę obsługiwać, tzn. Lol –
Powinno to też działa. Najpierw utworzyć absolutną elementu div położenie i 100% bezwzględną wysokość:
<div id="h" style="position:absolute;top:0;bottom:0;"></div>
Następnie uzyskać wysokość okna z tego elementu poprzez offsetHeight
var winHeight = document.getElementById('h').offsetHeight;
może powodować przewijanie pasków – stuartdotnet
Spróbuj użyć jQuery:
window_size = $(window).height();
Sposób, w jaki lubię to robić, jest podobny do zadania trójpodziału.
var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth;
var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;
mogę podkreślić, że jeśli uruchomić to w globalnym kontekście, że od tego momentu można wykorzystać window.height i window.width.
Działa na IE i innych przeglądarkach, o ile wiem (testowałem tylko na IE11).
Super czysty i, jeśli się nie mylę, sprawny.
Chciałbym wiedzieć, czy istnieje techniczny powód, dla którego wzór 'var width = window.innerWidth || window.clientWidth; 'nie jest używane. –
Pierwszym powodem jest to, że zdefiniowana jest tylko jedna z dwóch właściwości, w zależności od używanego typu przeglądarki. Jeśli chodzi o dlaczego nie wystarczy użyć operatora koalescencji, technicznie, który powinien być używany, gdy elementy są zdefiniowane, ale jeden z nich może być fałszywą wartością. Chrome jest na tyle sprytny, że wciąż daje wartość, ale przynajmniej historycznie, Firefox narzekałby, że pierwsza zmienna nie istnieje. Nie wiem, jak to jest teraz, ale to jest powód. – techdude
Ok, dla porównania, testowałem to w najnowszych wersjach Firefoksa, Chrome, Safari i IE Edge. Używanie koalescji na niezdefiniowanych zmiennych działa dobrze, więc wygląda na to, że problem został rozwiązany. Mając to na uwadze, jedyny powód, dla którego wolisz używać potrójnych stwierdzeń nad formularzem koalescencyjnym, dotyczy powodów związanych z osobistym stylem, lub możesz wesprzeć starsze przeglądarki. Pamiętaj, że kiedy ten zapis został napisany, musieliśmy obsługiwać IE6 i FF3, a gdybym miał zgadywać, powiedziałbym, że to FF3 miało problem ze składnią koalescencyjną. – techdude
wolę tak, jak tylko zorientowali się ... nie JS ... 100% HTML & CSS.
(będzie centrum idealnie w środku, niezależnie od wielkości zawartości
Plik HTML
<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;
}
do centrowania obrazów/div's trzymanych w td, możesz spróbować marży: auto; i zamiast tego podaj wymiar div. -To powiedzenie, że ... właściwość "wyrównywanie tekstu" wyrówna znacznie więcej niż zwykły element tekstowy.
Wersja JavaScript w przypadku, gdy jQuery nie jest opcją.
window.screen.availHeight
var winWidth = window.screen.width;
var winHeight = window.screen.height;
document.write(winWidth, winHeight);
Najlepiej podać wyjaśnienie swojej odpowiedzi wraz z dowolnym kodem, aby podać kontekst wszystkim przyszłym użytkownikom tego pytania –
Jest prostszy sposób niż cała masa if. Użyj operatora lub (||).
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);
z jQuery można spróbować to $(window).innerHeight() (u mnie działa na Chrome, FF i IE). Z modałem bootstrap użyłem czegoś takiego jak poniżej;
$('#YourModal').on('show.bs.modal', function() {
$('.modal-body').css('height', $(window).innerHeight() * 0.7);
});
zobacz [to SO wątku] (http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript). – Vinz
@JasonS wybierz odpowiedź techdude. –