Logo Serwisu Media Nauka

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

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





Inne zagadnienia z tej lekcji




Polecamy koszyk



© Media Nauka 2008-2017 r.