Okna przeglądarki a JavaScript

Autor: Dawid Pytel, dodano: 26-07-2003
Kategoria: Programowanie i tworzenie

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ć:

&ltbody 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 180x200:

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>
<body>
<a href="javascript:aktualizuj('inna.htm')">Zmień
</body>



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.

Ocena 2.67/5 (53.38%) (456 głosów)

Komentarze:


  • Dodał: Raiden data: 2009-09-14
    dzięki przydąło mi się ...
  • okno popup
    Dodał: Gość data: 2013-11-16
    witam Czy jest możliwe napisanie skryptu który samoczynnie w kolejności będzie otwierał kilka stron www. w oknie popu.
    Otwarcie okna będzie zamykać wcześniej już otwarte. i czas automatycznego otwierania np co 20s. Coś w rodzaju linboxa,
    z poważaniem Krzysztof Bruszewski k.b59@wp.pl
  • Automatyczne otwieranie okien co pare sekund bylo by najlesze
    Dodał: Gośćsb@em data: 2014-11-13
    Jest to bardzo potrzebne.
  • Automatyczne otwieranie okien co pare sekund bylo by najlesze
    Dodał: Gośćsb@em data: 2014-11-13
    Jest to bardzo potrzebne.


Dodaj komentarz:


Temat:
Twój nick:
Komentarz:
 

Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.