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:

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>
Lupa

 

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.




© medianauka.pl, 2016-12-26, A-3354



Udostępnij
©® Media Nauka 2008-2023 r.