Okna w JavaScript

Większość przeglądarek domyślnie blokuje otwieranie nowych okien i zakładek z poziomu kodu. W niniejszym artykule omówię działanie okienek, właściwości i metody obiektu Window, lepiej jednak opierać strukturę naszej strony na warstwach DIV w HTML i CSS.

Otwarcie nowego okna

Okno z poziomu JavaScript można otworzyć za pomocą polecenia:

window.open(url, nazwa, opcje);

gdzie:

url - adres strony, która ma się wyświetlić w nowo otwartym oknie,
nazwa - nazwa okienka,
ustawienia - parametry wymienione niżej w tablicy. Kolejne opcje wymieniamy po przecinkach bez spacji.

Opcje ustawień okna

W poniższej tabeli ujęto wybrane opcje okna, które są akceptowane przez większość przeglądarek.

Opcja	Wartość	Opis
Directories	yes/no (1/0)	Wyświetlanie przycisków katalogów.
Location	yes/no (1/0)	Wyświetlanie paska adresu.
Menubar	yes/no (1/0)	Wyświetlanie menu przeglądarki.
Resizable	yes/no (1/0)	Możliwość zmiany rozmiaru okna.
Scrollbars	yes/no (1/0)	Wyświetlanie pasków przewijania.
Status	yes/no (1/0)	Wyświetlanie paska statusu.
Toolbar	yes/no (1/0)	Wyświetlanie paska narzędzi.
Width	px (piksele)	Szerokość okna (minimalna wartość to 100).
Height	px (piksele)	Wysokość okna (minimalna wartość to 100).
Top	px (piksele)	Położenie górne okna na ekranie.
Left	px (piksele)	Położenie okna na ekranie względem lewej krawędzi ekranu.

Przykład 1 - nowe okno

<script>
 var nOkienko=window.open('https://medianauka.pl', 'Media Nauka', 'toolbar=0,menubar=0,scrollbars=0,resizable=0,status=0,location=0,directories=0,top=20,left=20,height=600,width=400');
</script>

Dzięki temu, że mamy przypisane nowo utworzone okno do zmiennej (w naszym przykładzie nOkienko), możemy manipulować jego zawartością poprzez obiekt zmienna.document (u nas nOkienko.document) lub zmienna.metoda lub zmienna.właściwość.

Właściwości obiektu Window

Opcja	Opis
closed	Zwraca true lub false w zależności od tego, czy okno jest zamknięte.
defaultStatus	Ustawia lub zwraca domyślny tekst w pasku statusu przeglądarki.
document	Udostępnia obiekt document.
frameElement	Zwraca element <iframe>.
frames	Zwraca odwołania do wszystkich <iframe> danego okna.
history	Zwraca historię danego okna.
innerHeight	Zwraca wysokość zawartości okna.
innerWidth	Zwraca szerokość zawartości okna.
length	Zwraca liczbę elementów <iframe>.
localeStorage	Zwraca referencję do Storage (localStorage)
location	Zwraca obiekt location okna (adres strony).
name	Ustawia lub zwraca nazwę okna.
navigator	Zwraca obiekt navigator.
opener	Zwraca referencję do okna, które utworzyło dane okno.
outerHeight	Zwraca wysokość zewnętrzną okna.
outerWidth	Zwraca szerokość zewnętrzną okna.
pageXOffset	Zwraca liczbę pikseli części okna, która została ukryta po przewinięciu zawartości okna poziomo względem lewego górnego rogu okna.
pageyOffset	Zwraca liczbę pikseli części okna, która została ukryta po przewinięciu zawartości okna pionowo względem lewego górnego rogu okna.
parent	Zwraca okno rodzica.
screen	Zwraca obiekt screen okna.
screenLeft	Zwraca współrzędną horyzontalną okna względem ekranu.
screenTop	Zwraca współrzędną wertykalną okna względem ekranu.
screenX	Zwraca lewe położenie okna na ekranie.
screenY	Zwraca górne położenie okna na ekranie.
sessionStorage	Zwraca referencję do Storage (sessionStorage).
scrollX	Zwraca alias do pageXOffset.
scrollY	Zwraca alias do pageYOffset.
self	Zwraca odwołanie do aktualnego okna.
status	Zwraca/ustawia tekst na statusie danego okna.
top	Zwraca odwołanie do okna położonego najwyżej w hierarchii.

Metody obiektu Window

metoda	Opis
alert()	Otwiera okno dialogowe, zobacz: Okienka w JavaScript.
back()	Wraca do poprzedniej strony w historii.
blur()	Usuwa aktywność (focus) z danego okna i ustawia dane okno pod innymi okienkami.
clearInterval()	Kasuje działanie metody setInterval();
clearTimeout()	Kasuje działanie metody setTimeout();
close()	Zamyka okno.
confirm()	Otwiera okno dialogowe, zobacz: Okienka w JavaScript.
focus()	Ustawia aktywność (fokus) danego okna, okno to znajduje się wówczas na pierwszym planie.
forward()	Przechodzi do następnej strony w historii.
home()	Przechodzi do strony startowej.
moveBy(x,y)	Przesuwa dane okno o wartość (x,y).
moveTo(x,y)	Przesuwa dane okno do wartości (x,y).
open()	Otwiera dane okno.
print()	Drukuje zawartość okna.
prompt()	Otwiera okno dialogowe, zobacz: Okienka w JavaScript.
resizeBy(x,y)	Zmienia rozmiar okna o (x,y).
resizeTo(x,y)	Zmienia rozmiar okna do (x,y).
scroll(x,y)	Przewija zawartość okna do (x,y).
scrollBy(x,y)	Przewija zawartość okna o (x,y).
setInterval()	Wywołuje funkcję co określony czas.
setTimeout()	Wywołuje funkcję po określonej liczbie czasu.
stop()	Zatrzymuje ładowanie zawartości strony.

Inne zagadnienia z tej lekcji

Ciasteczka (cookies)

Jak w JavaScript obsługiwać ciasteczka (cookies)? Jest to pakiet informacji, które serwer przekazuje przeglądarce internetowej podczas pierwszej wizyty, a także z których korzysta za każdym następnym razem.

Storage

Storage jest wygodniejszą alternatywą dla ciasteczek. Nie jest jednak obsługiwany przez stare wersje przeglądarek. Używanie storage jest trywialnie proste. Możemy zapisać i odczytać dane.

Formularze w JavaScript

formularze w JavaScript. Jeżeli chcemy reagować na to, co użytkownik wpisuje w pola formularza na stronie internetowej, zanim cokolwiek wyśle na serwer, to JavaScript jest w tym momencie nieoceniony.

Funkcje wywoływane czasowo w JavaScript

Funkcje wywoływane czasowo w JavaScript. JavaScript daje możliwość wywoływania własnej funkcji co określony czas lub po upływie określonego czasu. Jednostką czasu jest milisekunda. Wystarczy pamiętać, że 1 sekunda - 1000 milisekund.