Znajomość obsługi okien w JavaScript jest niezwykle przydatna. Okna są wszechobecne na stronach WWW np. w postaci pop-upów. Należy także pamiętać, że okno jest najważniejszym elementem interfejsu przeglądarki.
W tym artykule chciałbym nauczyć Was jak tworzyć, otwierać, zamykać nowe okienka. Bardzo przydatną funkcją będzie także umiejętność przesyłania informacji między oknami. Więc zaczynamy… Najważniejszym elementem który odpowiada za pracę z oknami jest obiekt window. To on stoi na czele hierarchii obiektów JavaScript. Na początku zapoznamy się z pierwszą najłatwiejszą komendą open().
Przykład 1
| function otworz() { noweOkno = window.open(’strona.htm’, 'okienko’) } |
Odwołując się do powyższej funkcji możemy napisać np.
| <a href=”javascript:otworz()”>Otwórz okno</a> |
Co spowoduje funkcja otworz()? Oczywiście utworzy nowe okno przeglądarki. Będzie miało nazwę okienko a zawartością będzie strona.htm. Prawda, że łatwe? A to dopiero początek 🙂
Przykład 2
Teraz zmodyfikujemy nasz kod. Powiedzmy, że wszystkie linki na naszej stronie będą otwierane przez JavaScript. Wówczas musielibyśmy dla każdego linku stworzyć osobną funkcję. Rozwiązanie to jest zupełnie niepraktyczne i niewygodne. Jednak jest na to lepszy sposób:
| function otworz(adres) { noweOkno = window.open(adres, 'okienko’) } |
Teraz wystarczy tworząc link napisać coś takiego:
| <a href=”javasript:otworz(’strona1.htm’)”>Strona 1</a> <a href=”javasript:otworz(’strona2.htm’)”>Strona 2</a> <a href=”javasript:otworz(’strona3.htm’)”>Strona 3</a> |
Tak więc mamy tylko jedną funkcję którą wykorzystujemy do wielu linków. Rozwiązanie bardzo wygodne w praktyce ponieważ chcąc zmienić ustawienia okna edytujemy jedynie funkcję a nie każdy odnośnik.
Wygląd okna
Wspomniałem o ustawieniach okna, teraz trochę o nich.
Każde okno zbudowane jest z kilku części, które możemy według naszego uznania usunąć lub zostawić. Są to: toolbar, menubar, location, scrollbars, status i resizable. Dla ułatwienia przedstawię je na obrazku:
Określenie czy dany element ma się pojawić w nowym oknie pozwoli nam w pełni kontrolować wygląd naszego okienka.
Przykład 3 – Tworzymy okienko pop-up.
Okienko tego typu pokazuję nam się przy wchodzeniu na stronę umieszczoną na serwerze republika.onet.pl. Takie rozwiązanie wykorzystywane jest zazwyczaj przy wyświetlaniu różnego rodzaju reklam lub ważnych ogłoszeń. Proszę tylko nie przesadzać z ilością pop-upów – jest to bardzo denerwujące.
Ponownie skorzystamy z wcześniej stworzonego skryptu odpowiednio go zmieniając.
| function otworz(adres) { noweOkno = window.open(adres, 'okienko’, 'menubar=no, toolbar=no, location=no, scrollbars=no, resizable=no, status=no’) } |
Oczywiście zamiast no możesz wpisać yes. Wszystko zależy od efektu jaki chcesz osiągnąć. Aby wywołać powyższą funkcję np. podczas załadowania strony, wystarczy przy deklaracji BODY wpisać:
| <body onLoad=”otworz(’stronka.htm’)”> |
Przykład 4 – Określamy rozmiar okna
Aby w pełni wykorzystać wszystkie możliwości tworzenia okienek należy wspomnieć o określaniu rozmiarów okna. Podobnie jak w htmlu rozmiary definiujemy dwoma atrybutami: height i width. Oto jak powinna wyglądać funkcja tworząca okienko o rozmiarach 180×200:
| function otworz(adres) { noweOkno = window.open(adres, 'okienko’, 'menubar=no, toolbar=no, location=no, scrollbars=no, resizable=no, status=no, width=180, height=200′) } |
Jak więc widać możliwości są bardzo duże.
Teraz przejdziemy do trochę wyższego stopnia zaawansowania 🙂 Pokażę w jaki sposób można sterować zawartością okien z poziomu innych okien.
Przykład 5 – sterowanie zawartością okien
Powiedzmy, że nasz skrypt otwiera nowe okienko:
| function otworz(adres) { noweOkno = window.open(adres, 'okienko’, 'menubar=no, toolbar=no, location=no, scrollbars=no, resizable=no, status=no, width=180, height=200′) } … <body onLoad=”otworz(pilot.htm)”> |
Teraz naszym nowym „pilotem” będziemy zmieniać zawartość głównego okna. Oto jak powinien wyglądać kod strony pilot.htm :
| function aktualizuj(adres) { opener.document.location = adres } </script> </head> |
Tak więc cała zabawa odbywa się w skrypcie. Opener określa okno które otworzyło naszego pilota. Natomiast document.location odnosi się do lokalizacji zawartości okna.
W ten sposób możemy stworzyć coś w stylu pulpitu sterującego zawartością okien.
Teraz przydałoby się pozamykać otwarte okna.
Przykład 6 – zamykanie okien
Jeżeli chcemy zamknąć otwarte okienko wystarczy użyć bardzo prostej funkcji:
| function zamknij() { noweOkno.close() } |
Skrypt ten zamyka okno przypisane do zmiennej noweOkno. Prawda, że łatwe?
Kilka sztuczek
Na koniec przedstawię kilka ciekawych właściwości okienek. W funkcji otwierającej nowe okno możemy umieścić następujące metody:
noweOkno.focus()
Spowoduje to pojawienie się nowootwartego okna na pierwszym planie. Jest to bardzo przydatne gdy chcemy aby nasze okno było widoczne wśród wielu innych okienek.
noweOkno.blur() Jest przeciwieństwem focus(). Czyli nasze okienko pojawi się pod innymi okienkami.
Istnieje możliwość określenia odległości nowego okna od lewej i górnej krawędzi ekranu. Używamy do tego atrybutów left i top.
Przykład 7 – dopieszczone okienko 🙂
Oto jak wykorzystać powyższe „sztuczki”:
| function otworz(adres) { noweOkno = window.open(adres, 'okienko’, 'menubar=no, toolbar=no, location=no, scrollbars=no, resizable=no, status=no, width=180, height=200, left=30, top=30′) noweOkno.focus() } |
To tyle, jeżeli chodzi o okienka przeglądarek. Przy odrobinie wyobraźni i wiedzy bez problemu można tworzyć bardziej zaawansowane skrypty sterujące okienkami. Zapraszam do eksperymentowania.
