JavaScript Window Object

JavaScript Window jest globalnym interfejsem (typem obiektu), który jest używany do kontrolowania cyklu życia okna przeglądarki i wykonywania różnych operacji na nim.

Zmienna globalna window, która reprezentuje bieżące okno przeglądarki, w którym kod jest uruchomiony, jest dostępna w naszym kodzie JavaScript i może być bezpośrednio dostępna poprzez użycie window literal.

Okno reprezentuje okno zawierające stronę internetową, która z kolei jest reprezentowana przez obiekt document. Okno może być nowym oknem, nową zakładką, zestawem ramek lub pojedynczą ramką utworzoną za pomocą JavaScript.

W przypadku przeglądarki z wieloma zakładkami obiekt okna reprezentuje pojedynczą zakładkę, ale niektóre z jego właściwości, takie jak innerHeight, innerWidth i metody, takie jak resizeTo(), będą miały wpływ na całe okno przeglądarki.

Kiedy otwierasz nowe okno lub zakładkę, obiekt okna reprezentujący to okno/zakładkę jest tworzony automatycznie.

Właściwości obiektu okna są używane do pobierania informacji o aktualnie otwartym oknie, podczas gdy jego metody są używane do wykonywania określonych zadań, takich jak otwieranie, maksymalizacja, minimalizacja okna itp.

Aby zrozumieć obiekt okna, użyjmy go do wykonania pewnych operacji i zobaczmy, jak to działa.

Używanie obiektu okna JavaScript

Użyjmy obiektu okna JavaScript do utworzenia nowego okna, używając metody open(). Metoda ta tworzy nowe okno i zwraca obiekt, który dalej może być użyty do zarządzania tym oknem.

W powyższym kodzie, użyliśmy obiektu window istniejącego okna do stworzenia nowego okna przy użyciu metody open(). W metodzie open() możemy podać adres URL, który ma zostać otwarty w nowym oknie (możemy również pozostawić go pustym), nazwę okna, szerokość i wysokość tworzonego okna.

Poniżej znajduje się składnia metody open() obiektu window:

let newWindow = window.open(url, windowName, );

Możemy podać tyle właściwości, ile chcemy, podczas tworzenia nowego okna.

Kiedy metoda open() jest wykonywana, zwraca referencję obiektu window dla nowo utworzonego okna, którą możemy przypisać do zmiennej, tak jak zrobiliśmy to w powyższym kodzie. My przypisaliśmy wartość zwróconą przez metodę window.open() do zmiennej win.

Użyliśmy zmiennej win do uzyskania dostępu do nowego okna, jak np. uzyskanie nazwy okna, uzyskanie lokalizacji okna, które otworzyło nowe okno itp.

Istnieje wiele właściwości i metod dla obiektu okna, które mamy wymienione poniżej.

Znajdowanie wymiarów okna

Możemy uzyskać wysokość i szerokość okna za pomocą wbudowanych właściwości obiektu okna.

Możemy również uzyskać dostęp do obiektu dokumentu używając obiektu window(window.document), który daje nam dostęp do dokumentu HTML, stąd możemy dodać nowy element HTML, lub napisać dowolną treść do dokumentu, tak jak zrobiliśmy to w powyższym przykładzie.

Właściwości obiektu okna JavaScript

Właściwości obiektu wondow odnoszą się do zmiennych utworzonych wewnątrz obiektu windows.

W JavaScript, wszystkie dostępne dane są dołączone do obiektu window jako właściwości.

Możemy uzyskać dostęp do właściwości obiektu window jak: window.propertyname gdzie propertyname jest nazwą właściwości.

Tablica najpopularniejszych właściwości obiektów okiennych jest podana poniżej:

.

Właściwość	Opis
zamknięte	zwraca wartość typu boolean, która określa, czy okno zostało zamknięte, czy nie
dokument	określa obiekt dokumentu w oknie.
historia	określa obiekt historii dla okna.
frames	określa tablicę wszystkich ramek w bieżącym oknie
defaultStatus	określa domyślny komunikat, który ma być wyświetlany na pasku stanu okna.
innerHeight	określa wewnętrzną wysokość obszaru zawartości okna.
innerWidth	określa wewnętrzną szerokość obszaru zawartości okna.
length	określa liczbę ramek zawartych w oknie.
location	określa obiekt lokalizacji dla okna
name	określa nazwę okna
top	określa odniesienie do najwyższego okna przeglądarki.
self	zwraca odniesienie do bieżącej aktywnej ramki lub okna.
parent	zwraca ramkę lub okno nadrzędne bieżącego okna.
status	określa komunikat, który jest wyświetlany na pasku stanu okna, gdy w oknie jest wykonywana czynność.
screenleft	określa współrzędną x okna względem ekranu monitora użytkownika
screenTop	określa współrzędną y okna względem ekranu monitora użytkownika
screenX	określa współrzędną x okna w stosunku do ekranu monitora użytkownika
screenY	określa współrzędną y okna w stosunku do ekranu monitora użytkownika

Przyjrzyjrzyjmy się przykładowi, aby zobaczyć kilka z tych właściwości w akcji:

W powyższym przykładzie utworzyliśmy nowe okno, tylko po to, aby zaznajomić Cię z tworzeniem nowych okien, a także, abyś zrozumiał, że kiedy tworzymy nowe okno, wtedy bieżące okno ma inny obiekt okna, a nowe okno będzie miało oddzielny obiekt okna.

Próbowaliśmy następnie uzyskać dostęp do niektórych właściwości nowo utworzonego okna.

ZADANIE: Wypróbuj jeszcze kilka właściwości okna w powyższym placu zabaw z kodem, aby przećwiczyć i zrozumieć, jak działają właściwości okna.

Metody obiektu okna JavaScript

Metody obiektu okna odnoszą się do funkcji utworzonych wewnątrz obiektu okna, które mogą być używane do wykonywania różnych działań na oknie przeglądarki, takich jak sposób wyświetlania wiadomości lub uzyskiwania danych wejściowych od użytkownika.

Poniżej wymieniliśmy niektóre z najczęściej używanych metod obiektu Window:

.

.

Metoda	Opis
alert()	określa metodę, która wyświetla okno alertu z komunikatem i przyciskiem OK.
blur()	specyfikuje metodę, która usuwa fokus z bieżącego okna.
clearInterval()	specyfikuje metodę, która kasuje timer, który jest ustawiony za pomocą metody setInterval().
close()	określa metodę, która zamyka bieżące okno.
confirm()	specyfikuje metodę, która wyświetla okno dialogowe z komunikatem i dwoma przyciskami OK i Anuluj
focus()	specyfikuje metodę, która ustawia fokus na bieżącym oknie.
open()	specyfikuje metodę, która otwiera nowe okno przeglądarki
moveTo()	specyfikuje metodę, która przenosi okno na określoną pozycję
moveBy()	specyfikuje metodę, która przenosi okno względem jego bieżącej pozycji.
prompt()	specyfikuje metodę, która prosi o podanie danych wejściowych.
print()	specyfikuje metodę, która wysyła polecenie print w celu wydrukowania zawartości bieżącego okna.
setTimeout()	specyfikuje metodę, która ocenia wyrażenie po określonej liczbie milisekund.
setInterval()	określa metodę, która ocenia wyrażenie w określonych odstępach czasu (w milisekundach)
resizeBy()	określa wielkość, o jaką zostanie zmienione okno
resizeTo()	używany do dynamicznej zmiany rozmiaru okna
scroll()	przewija okno do określonego miejsca w dokumencie
scrollBy()	przewija okno o podaną wartość
stop()	this method zatrzymuje ładowanie okna

Przyjrzyjrzyjmy się przykładowi i zobaczmy kilka z powyższych metod w akcji:

W powyższym przykładzie użyliśmy kilku metod okienkowych, możesz wypróbować więcej metod. W następnym tutorialu poznamy obiekt History, który jest właściwością obiektu Window.