JavaScript umożliwia programiście w niezwykle prosty sposób uzyskać wiele informacji dotyczących monitora, przeglądarki oraz położenia kursora użytkownika.

Java Script - obiekt window i położenie kursora

Poniżej przedstawiłem w pierwszej kolejności właściwości MouseEvent, a dalej właściwości window dotyczące monitora, przeglądarki. Na samym dole znajduje się kod użyty do wyświetlenia na stronie poniższych informacji.

Zwróć uwagę, że wszystkie informacje wypisane po pogrubionych nazwach dotyczą Twojej przeglądarki i przypisywane, są dynamicznie za pomocą Java Script.

Aktualne położenie kursora:
event.screenX; – odległość od fizycznego lewego górnego rogu monitora
event.screenY; – odległość od fizycznego lewego górnego rogu monitora
event.pageX; – faktyczne liczone od lewego górnego rogu przeglądarki
event.pageY; – faktyczne liczone od lewego górnego rogu przeglądarki
event.clientX; – po przesunięciu scrollbarów wskazywana jest odległość od widocznego rogu
event.clientY; – po przesunięciu scrollbarów wskazywana jest odległość od widocznego rogu
Informacje o dotyczące monitora i przeglądarki.
Aktualny rozmiar okna przeglądarki (bez uwzględnienia toolbarów i scrollbarów):
window.innerWidth; – szerokość
window.innerHeight; – wysokość
Aktualny rozmiar okna przeglądarki (włącznie z toolbarami i scrollbarami):
window.outerWidth; – szerokość
window.outerHeight; – wysokość
Aktualne przesunięcie okna scrollbarami (przy ich braku wskazanie będzie 0):
window.pageXOffset; – poziomo
window.pageYOffset; – pionowo
Wskazuje o ile oddalona jest lewa i górna krawędź przeglądarki od lewej i górnej części ekranu:
window.screenX; – poziomo
window.screenY; – pionowo
Aktualny link z okna przeglądarki oraz liczba elementów, które znajduje się w historii:
window.location; – bieżący adres URL
window.history.length; – liczba elementów, które znajdują się w historii

Poniżej kod Java Script do wywołania wszystkich zaprezentowanych informacji.

W pierwszym akapicie, są zbierane do tablicy wszystkie elementy DIV, do których wprowadzone będą dane. Drugi akapit to wywołanie funkcji za każdym razem gdy zmieniany jest rozmiar okna lub następuje ruch myszką. Ostatni akapit to aktualizacja pobranych danych dotyczących okna przeglądarki i myszy.

var pt = [];
for (var i=1; i<18; i++) {
	pt[i] = document.getElementById("p"+String(i));

}

window.addEventListener('mousemove', position, false);
window.addEventListener('resize', position, false);
position();

function position(event) {
	pt[1].innerHTML = "window.innerHeight: " + window.innerHeight;
	pt[2].innerHTML = "window.innerWidth: " + window.innerWidth;
	pt[3].innerHTML = "window.outerWidth: " + window.outerWidth;
	pt[4].innerHTML = "window.outerHeight: " + window.outerHeight;
	pt[5].innerHTML = "window.pageXOffset: " + window.pageXOffset;
	pt[6].innerHTML = "window.pageYOffset: " + window.pageYOffset;
	pt[7].innerHTML = "window.screenX: " + window.screenX;
	pt[8].innerHTML = "window.screenY: " + window.screenY;
	pt[9].innerHTML = "window.location: " + window.location;
	pt[11].innerHTML = "window.history.length: " + window.history.length;
	pt[12].innerHTML = "event.screenX: " + event.screenX;
	pt[13].innerHTML = "event.screenY: " + event.screenY;
	pt[14].innerHTML = "event.pageX: " + event.pageX;
	pt[15].innerHTML = "event.pageY: " + event.pageY;
	pt[16].innerHTML = "event.clientX: " + event.clientX;
	pt[17].innerHTML = "event.clientY: " + event.clientY;
}