Obiekt window

Jest to obiekt, który reprezentuje okno przeglądarki lub ramkę w oknie przeglądarki.
Obiekt window stoi na najwyższym szczeblu w hierarchi obiektowej przeglądarki, tak więc wszystkie pozostałe obiekty stanowią właściwości tego obiektu. Poprzez obiekt window, realizowany jest dostęp do wszystkich obiektów przeglądarki, jak również do wszystkich obiektów wbudowanych.

Na przykład:

window.document.write("Napisz coś");

a = window.Math.PI;

Obiekt window jest centralnym i domyślnym obiektem przeglądarki. Wszystkie instrukcje JavaScript są wykonywane w kontekście tego obiektu. Z tego powodu, pisanie window w powyższych instrukcjach nie jest konieczne. Równie prawidłowy będzie zapis:

document.write("Napisz coś");

a = Math.PI;



Właściwości obiektu window:


Metody obiektu window:


Właściwości obiektu window

window.name

Właściwość określa nazwę okna lub ramki. Nazwa okna może być określona podczas otwarcia nowego okna metodą window.open. Nazwa ramki może być określona poprzez artybut NAME w znaczniku <FRAME>.

window.opener

Obiekt istniejący tylko w przypadku, gdy okno zostało otwarte metodą window.open
Obiekt ten reprezentuje okno dokumentu, z którego metoda została wywołana.

window.closed

Zwraca wartość logiczną true (prawda) lub false (fałsz) informującą czy okno zostało zamknięte. Właściwość ta jest tylko do odczytu.
Właściwość tą możemy użyć w celu stwierdzenia czy okno, które wcześniej otworzyliśmy za pomocą metody window.open(), wciąż jest otwarte, czy też nie.

Na przykład:

okno=window.open('plik.html','newwin','');

/* po otwarciu nowego okna, możemy sprawdzić, czy użytkownik zamknął to okno, czy też nie i w zależności od tego podjąć odpowiednie kroki. */
if(okno.closed)
 funkcja1();
else
 funkcja2();

Może też zaistnieć odwrotna sytuacja. Nowo otwarte okno "może sprawdzić", czy użytkownik nie zamknął okna "głównego" (z którego zostało otwarte).

if(window.opener.closed)
 funkcja1();
else
 funkcja2();

window.defaultStatus

Właściwość określająca domyślny tekst na pasku statusu przeglądarki.
Pasek statusu przeglądarki służy do wyświetlania informacji na temat postępu podczas ładowania się dokumentu. Na pasku tym jest również wyświetlany adres docelowy odnośnika, nad którym umieścimy kursor myszki. W każdym innym przypadku, pasek statusu jest pusty. Nadając właściwości defaultStatus odpowiednią wartość, możemy wypełnić pusty pasek statusu dowolnym tekstem.

defaultStatus = "dowolny tekst";

Należy pamiętać o tym, że właściwość defaultStatus zachowuje swoją wartość, nawet po załadowaniu innej strony. Z tego powodu, dobry styl programowania nakazuje, aby zresetować tę właściwość (nadać jej wartość pustego łańcucha) podczas opuszczania strony.

<body onUnload="defaultStatus=''">

window.status

Właściwość określająca tymczasowy tekst na pasku statusu.
Najczęściej właściwość tą ustawia się dla jakiegoś zdarzenia np:

<A HREF="http://home.netscape.com"
 onMouseOver="status='idź do strony firmy Netscape'; return true">Netscape</A>

window.document

Obiekt reprezentujący aktualny dokument, załadowany do okna lub ramki.
Zobacz szczegółowy opis obiektu window.document

window.frames

Obiekt stanowiący kolekcję (tablicę) ramek znajdujących się w oknie przeglądarki (utworzonych za pomocą znacznika <FRAME>). O ilości ramek w danym oknie, możemy dowiedzieć się, odczytując właściwość:

frames.length

Dostęp do poszczególnych ramek, możemy zrealizować za pomocą indeksów:

frames[0] - to pierwsza ramka
frames[1] - to druga ramka itd.

Jeżeli ramka ma swoją nazwę (atrybut NAME), to dostęp do niej można zrealizować w następujący sposób:

frames["nazwa_ramki"]

window.length

Właściwość określająca ilość ramek w oknie. Właściwość mająca tą samą wartość co window.frames.length

window.history

Obiekt reprezentujący listę historyczną przeglądarki.

window.location

Obiekt reprezentujący aktualny adres URL przeglądarki.
Zobacz szczegółowy opis obiektu window.location

window.navigator

Obiekt, którego właściwości określają typ przeglądarki użytej do otwarcia dokumentu.
Najczęściej wykorzystywanymi właściwościami są:

appName - nazwa przeglądarki.
appVersion - wersja przeglądarki.
platform - informacja o systemie operacyjnym.
appCodeName - nazwa kodowa przeglądarki.
userAgent - łańcuch znakowy, używany do identyfikacji przeglądarki w protokole HTTP.

window.screen

Obiekt, którego właściwości określają parametry ekranu użytkownika. Właściwości te, są tylko do odczytu. Możemy tu wyróżnić między innymi:

width - szerokość ekranu w pikselach.
height - wysokość ekranu w pikselach.
availWidth - dostępna szerokość ekranu w pikselach.
availHeight - dostępna wysokość ekranu w pikselach.
pixelDepth - ilość kolorów w bitach na piksel.

Dostępna szerokość lub wysokość, uzależniona jest od charakterystycznych cech interfejsu w danym systemie operacyjnym. Na przykład, w systemie Windows, brany jest pod uwagę obszar poza paskiem zadań.

window.self

Obiekt, reprezentujący aktualne okno lub ramkę.
Obiekt window.self równy jest obiektowi window. Obiekt self może być użyty w celu uczynienia kodu bardziej czytelnym.

window.parent

Obiekt, reprezentujący okno lub ramkę znajdującą się o jeden stopień wyżej w hierarchi ramkowej dokumentu.
W przypadku, gdy dokument nie jest umieszczony w ramce, obiekt window.parent równy jest obiektowi window.

window.top

Obiekt, reprezentujący okno znajdujące się na najwyższym poziomie w hierarchi ramkowej dokumentu.
W przypadku, gdy dokument nie jest umieszczony w ramce, obiekt window.top równy jest obiektowi window.

window.innerHeight

Tylko Netscape.

Właściwość określająca wysokość obszaru klienta przeglądarki w pikselach. Właściwość możemy zarówno odczytać:
wysokosc = window.innerHeight;
jak też nadać jej określoną wartość:
window.innerHeight = 300;

window.innerWidth

Tylko Netscape.

Właściwość określająca szerokość obszaru klienta przeglądarki w pikselach. Właściwość możemy zarówno odczytać:
szerokosc = window.innerWidth;
jak też nadać jej określoną wartość:
window.innerWidth = 500;

window.outerHeight

Tylko Netscape.

Właściwość określająca wysokość okna przeglądarki w pikselach. Właściwość możemy zarówno odczytać:
wysokosc = window.outerHeight;
jak też nadać jej określoną wartość:
window.outerHeight = 300;

window.outerWidth

Tylko Netscape.

Właściwość określająca szerokość okna przeglądarki w pikselach. Właściwość możemy zarówno odczytać:
wysokosc = window.outerWidth;
jak też nadać jej określoną wartość:
window.outerWidth = 500;

window.screenX

Tylko Netscape.

Właściwość określająca odległość okna przeglądarki od lewej krawędzi ekranu w pikselach. Właściwość możemy zarówno odczytać:
wysokosc = window.screenX;
jak też nadać jej określoną wartość:
window.screenX = 100;

window.screenY

Tylko Netscape.

Właściwość określająca odległość okna przeglądarki od górnej krawędzi ekranu w pikselach. Właściwość możemy zarówno odczytać:
wysokosc = window.screenY;
jak też nadać jej określoną wartość:
window.screenY = 100;

window.pageXOffset

Tylko Netscape.

Właściwość określająca stopień przewinięcia dokumentu w poziomie podana w pikselach.

window.pageYOffset

Tylko Netscape.

Właściwość określająca stopień przewinięcia dokumentu w pionie podana w pikselach.

window.screenLeft

Tylko Internet Explorer.

Właściwość określająca odległość obszaru klienta okna lub ramki od lewej krawędzi ekranu w pikselach. Tylko do odczytu.

window.screenTop

Tylko Internet Explorer.

Właściwość określająca odległość obszaru klienta okna lub ramki od górnej krawędzi ekranu w pikselach. Tylko do odczytu.



Metody obiektu window

window.alert("tekst")

Metoda powoduje wyświetlenie okienka dialogowego, zawierającego dowolny tekst oraz klawisz "OK".
Metody tej używa się w celu podania użytkownikowi odpowiedniej informacji.

Przykład:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
function test(tekst) {
 if(tekst.length > 6) {
  alert("Wpisz nazwę mającą 6 liter lub mniej.")
 }
}
</SCRIPT>

<FORM>
Nazwa <INPUT TYPE="text" NAME="Nazwa"
   onKeyUp="test(Nazwa.value)">
</FORM>

window.confirm("tekst")

Metoda wywołująca okienko dialogowe zawierające dowolny tekst (pytanie) oraz dwa klawisze: "OK" i "ANULUJ".
Metoda ta zwraca wartość true, jeżeli użytkownik naciśnie klawisz "OK" lub false w przypadku klawisza "ANULUJ". Tak więc możemy podjąć różne działania, w zależności od tego jaki klawisz został naciśnięty.

window.prompt("tekst zapytania","tekst domyślny")

Metoda wywołująca okienko dialogowe zawierające dowolny tekst (pytanie), pasek tekstowy pozwalający użytkownikowi wpisać dowolny tekst oraz dwa klawisze: "OK" i "ANULUJ".
Jeżeli użytkownik naciśnie klawisz OK, to metoda ta zwraca wartość, którą jest wpisany tekst.
Jeżeli użytkownik naciśnie klawisz ANULUJ, to wartością zwrotną jest null.
Tekst wpisany przez użytkownika możemy przypisać jakiejś zmiennej i wykorzystać to w dalszej części dokumentu np:

var zmienna=prompt("Jak masz na imię?","");

if(zmienna!=null)
/* Jeżeli użytkownik nie nacisnął klawisza ANULUJ to */
alert("Cześć "+ zmienna);

window.open(adres,nazwa_okna,opcje)

Metoda służąca do otwierania nowego okna przeglądarki.

adres - adres URL dokumentu, który ma być załadowany do nowego okna.
nazwa_okna - dowolna nazwa nie zawierająca spacji i polskich liter. Nazwa ta, może być użyta jako argument TARGET w znacznikach <A> lub <FORM>.
opcje - łańcuch zawierający (oddzielone przecinkami) parametry nowo otwieranego okna.
Jeżeli metoda zostanie wywołana bez parametru opcje, to okno zostanie wywołane ze standardowymi ustawieniami. Większość parametrów opcji, może mieć ustawioną wartość yes lub no np:
"toolbar=yes, status=no"
jednakże wartości te nie muszą być określne. Po prostu, jeżeli dany parametr występuje, jego wartość wynosi yes. Jeżeli parametru nie ma, jego wartość wynosi no.

Dostępne opcje: Przykłady:

window.open("plik.html","okno1");
/* otwarcie okna o standardowym wyglądzie */

window.open("plik.html","okno2","toolbar=no");
/* otwarcie okna, które nie zawiera żadnych pasków ani menu głównego. W przypadku Netscape'a wystarczyłby pusty łańcuch "", jedak ustawione jest "toolbar=no", ponieważ Internet Explorer przy pustym łańcuchu ustawia standardowy wygląd */

window.open("plik.html","okno3","height=200,width=300,location")
/* otwarcie okna o określonych rozmiarach, zawierające tylko pasek URL */

Korzystając z nazwy okna możemy wysłać do niego inny dokument, używając tej nazwy jako atrybut TARGET w odnośniku

<A HREF="plik2.html" TARGET="okno1">link</A>

Wartością zwrotną metody window.open jest referencja do obiektu window nowo otwartego okna, tak więc możemy na przykład otworzyć nowe okno

moje_okno=window.open("plik.html","okno1");

a następnie, w innym miejscu kodu, zamknąć je

moje_okno.close();

window.close()

Metoda służąca do zamykania okna przeglądarki.
Metoda zamyka okno wywołane metodą window.open. Próba zamknięcia jakiegokolwiek innego okna tą metodą powoduje wyświetlenie okienka dialogowego, w którym użytkownik może zadecydować, czy okno może być zamknięte czy też nie.
W przeglądarce Netscape istnieje wyjątek od tej zasady. Jeżeli aktualny dokument jest jedynym w historii sesji przeglądarki to metoda zamyka to okno bez konieczności potwierdzania.

window.setInterval(wyrażenie,milisekundy)

Metoda inicjuje proces okresowego wywoływania instrukcji lub funkcji JavaScript w określonych odstępach czasowych.

Na przykład:

setInterval("funkcja1(3,2)",500);

W powyższym przykładzie funkcja funkcja1 jest wywoływana co pół sekundy, tak długo, dopóki dokument jest załadowany lub nie zostanie wywołana metoda clearInterval.

Jeżeli parametry wywoływanej funkcji nie są z góry określone, to metodę należy wywołać w następujący sposób:

var a=3,b=2;
setInterval("funkcja1("+ a +","+ b +")",500);

Wartością zwrotną tej metody jest identyfikator, który może być użyty do przerwania działania tej metody (zobacz clearInterval).

window.setTimeout(wyrażenie,milisekundy)

Metoda wywołuje instrukcję lub funkcję JavaScript po upływie określonego okresu czasu.

Na przykład:

setTimeout("funkcja1(3,2)",5000);

W powyższym przykładzie funkcja funkcja1 będzie wywołana po upływie pięciu sekund, chyba że wcześniej zostanie wywołana metoda clearTimeout.

Jeżeli parametry wywoływanej funkcji nie są z góry określone, to metodę należy wywołać w następujący sposób:

var a=3,b=2;
setTimeout("funkcja1("+ a +","+ b +")",5000);

Wartością zwrotną tej metody jest identyfikator, który może być użyty do przerwania działania tej metody (zobacz clearTimeout).

Funkcja podana jako argument tej metody wywoływana jest tylko raz. Aby zainicjować okresowe wywoływanie tej funkcji, użyj metody setInterval. Innym sposobem uzyskania tego efektu jest umieszczenie metody setTimeout wewnątrz funkcji wywoływnej tą metodą (zapętlenie funkcji):

function funkcja1() {

 //jakieś instrukcje

 setTimeout("funkcja1()",50);
}

Funkcja taka będzie zapętlona do czasu opuszczenia strony przez użytkownika, dlatego w pewnych sytuacjach, po dłuższym przebywaniu na stronie, może dojść do pochłonięcia znacznych zasobów pamięciowych komputera (szczególnie dotyczy to starszych przeglądarek Netscape). Można tak skonstruować funkcję, że nie będzie ona zapętlona w nieskończoność, tylko na czas występowania jakiegoś warunku:

function funkcja1() {

 //jakieś instrukcje

 if(warunek)
  setTimeout("funkcja1()",50)
}

window.clearInterval(interval_id)

Metoda przerywa okresowe wywoływanie instrukcji lub funkcji JavaScript, które zostało wcześniej zainicjowane metodą setInterval.

interval_id - identyfikator zwracany przez metodę setInterval.

Na przykład:

id1 = setInterval("funkcja1(3,2)",500);

Po wywołaniu metody i przekazaniu wartości identyfikatora do zmiennej id1 możemy przerwać działanie tej metody w następujący sposób:

clearInterval(id1);

window.clearTimeout(timeout_id)

Metoda kasuje wywoływanie instrukcji lub funkcji JavaScript, które zostało wcześniej zainicjowane metodą setTimeout.

timeout_id - identyfikator zwracany przez metodę setTimeout.

Na przykład:

id1 = setTimeout("funkcja1(3,2)",5000);

Po wywołaniu metody i przekazaniu wartości identyfikatora do zmiennej id1 możemy przerwać działanie tej metody w następujący sposób:

clearTimeout(id1);

window.moveBy(x,y)

Metoda służąca do pozycjonowania relatywnego okna przeglądarki.
Metoda ta, przesuwa okno przeglądarki na ekranie o określoną ilość pikseli w poziomie i w pionie.

Przykład:

window.moveBy(-10,20);
/* okno zostanie przesunięte o 10 pikseli w lewo i 20 pikseli w dół */

window.moveTo(x,y)

Metoda służąca do pozycjonowania absolutnego okna przeglądarki.
Metoda ta, ustawia okno przeglądarki w określonej pozycji w stosunku do lewego górnego rogu ekranu.

Przykład:

window.moveTo(30,50);
/* okno zostanie ustawione 30 pikseli od lewej krawędzi ekranu i 50 pikseli od górnej krawędzi ekranu */

window.resizeBy(x,y)

Metoda służąca do relatywnej zmiany rozmiarów okna przeglądarki.
Metoda ta, zmienia rozmiary okna przeglądarki o określoną ilość pikseli w poziomie i w pionie. Lewy górny róg okna pozostaje na nie zmienionej pozycji.

Przykład:

window.resizeBy(-50,30);
/* okno zostanie zmniejszone o 50 pikseli w poziomie i zwiększone o 30 pikseli w pionie */

window.resizeTo(x,y)

Metoda służąca do absolutnej zmiany rozmiarów okna przeglądarki.
Metoda ta, zmienia rozmiary okna przeglądarki do określonej ilości pikseli w poziomie i w pionie. Lewy górny róg okna pozostaje na nie zmienionej pozycji.

Uwaga
W przeglądarce Netscape 4.x wymiary x i y dotyczą obszaru klienta okna przeglądarki, natomiast w przeglądarkach Internet Explorer i Netscape 6.x wymiary te dotyczą zewnętrznych rozmiarów okna.

Przykład:

window.resizeTo(400,300);
/* wymiary okna zostaną ustawione na 400 pikseli w poziomie i 300 pikseli w pionie */

window.scrollBy(x,y)

Metoda służąca do relatywnego przewinięcia dokumentu w oknie przeglądarki.
Metoda ta, przewija dokument w oknie przeglądarki(o ile jest to możliwe) o określoną ilość pikseli w poziomie i w pionie.

Przykład:

window.scrollBy(10,-30);
/* dokument zostanie przewinięty o 10 pikseli w prawo i 30 pikseli do góry */

window.scrollTo(x,y)

Metoda służąca do absolutnego przewinięcia dokumentu w oknie przeglądarki.
Metoda ta, przewija dokument w oknie przeglądarki(o ile jest to możliwe) do określonej pozycji w poziomie i w pionie.

Przykład:

window.scrollTo(10,50);
/* dokument zostanie przewinięty do pozycji 10 pikseli od lewej krawędzi dokumentu i 50 pikseli od górnej krawędzi (początku dokumentu) */

window.scroll(x,y)

Metoda służąca do przewijania dokumentu w oknie przeglądarki.
Metoda jest przestarzała. Do przewijania dokumentu używaj metody window.scrollTo, która działa w identyczny sposób.

window.focus()

W większości systemów operacyjnch, wywołanie tej metody powoduje umieszczenie okna "na wierzchu" względem wszystkich pozostałych okien.

window.blur()

W większości systemów operacyjnch, wywołanie tej metody powoduje umieszczenie okna "pod spodem" wszystkich pozostałych okien.

window.print()

Metoda drukuje zawartość okna lub ramki.

window.back()

Tylko Netscape.

Wywołanie tej metody powoduje taki sam efekt jak naciśnięcie klawisza "Back" na pasku narzędziowym przeglądarki.

window.find("tekst"[,wielkoscLiter[,kierunek]])

Tylko Netscape 4.x

Metoda służąca do wyszukiwania dowolnego tekstu w aktualnym dokumencie.
Jeżeli tekst zostanie odnaleziony, wartością zwrotną jest true, w przeciwnym wypadku false. Jeżeli metoda zostanie wywołana bez żadnych parametrów, zostanie wywołane okienko dialogowe "Znajdź".

wielkoscLiter - opcjonalna wartość logiczna. Ustawiona na true powoduje uwzględnianie wielkości liter podczas przeszukiwania.

kierunek - opcjonalna wartość logiczna. Ustawiona na true powoduje przeszukiwanie dokumentu od końca do początku. Jeżeli ustawiamy ten parametr, to musimy również ustawić parametr wielkoscLiter.

window.forward()

Tylko Netscape.

Wywołanie tej metody powoduje taki sam efekt jak naciśnięcie klawisza "Forward" na pasku narzędziowym przeglądarki.

window.home()

Tylko Netscape.

Wywołanie tej metody powoduje taki sam efekt jak naciśnięcie klawisza "Home" na pasku narzędziowym przeglądarki.

window.stop()

Tylko Netscape.

Metoda zatrzymuje proces ładowania aktualnego dokumentu.
Wywołanie tej metody powoduje taki sam efekt jak naciśnięcie klawisza "Stop" na pasku narzędziowym przeglądarki.