JavaScript w przykładach - Otwieramy okna na świat














JavaScript   
w przykładach                
http://javascript.jest.o.k.pl













Otwieramy okna na świat




Jednym z częściej zadawanych na grupie pl.comp.www pytań jest "Jak zrobić, aby strona otwierała się na pełnym ekranie?" albo "Jak otworzyć nowe okno i załadować do niego inną stronę?". Spróbuję tu odpowiedzieć na te i inne pytania związane z oknami, ich otwieraniem, a także zamykaniem.

JavaScript pozwala na otwieranie nowych okien o określonych właściwościach. Oprócz wyglądu (paski menu, paski przewijania itp.) można też określić rozmiar okna (choć tu przeglądarki nakładają ograniczenia) oraz jego miejsce na ekranie (znów z pewnymi ograniczeniami). Daje to ogromne możliwości, ale, jak we wszystkim, należy mieć umiar. I od tego zacznijmy.








Czemu lepiej tego nie robić?






Jest kilka powodów, dla których należy unikać zbędnego otwierania nowych okien za pomocą JS; co więcej: bardzo rzadko takie okna są niezbędne.

Po pierwsze: nie wszyscy używają przeglądarek, które obsługują JavaScript, a spośród tych, którzy takie przeglądarki mają nie wszyscy pozostawiają obsługę tego udogodnienia włączoną. Dlatego używanie JS do nawigacji bez zapewnienia tradycyjnych odsyłaczy jest wielką pomyłką. Jeśli chcesz, aby link otwierał stronę w nowym oknie, użyj następującego rozwiązania: <a href="strona.html" target="_blank">Odsyłacz</a>. Parametr target="_blank" jest częścią starego, dobrego HTMLa i oznacza, że strona ma być otwarta w nowym oknie. Nie wymaga to żadnych skryptów. A jeśli koniecznie chcesz określić np. rozmiar tego okna, skorzystaj z rozwiązania zgodnego wstecz, opisanego dalej, w rozdziale "Wywołanie skryptu".

Po drugie: większość osób nie lubi, gdy na ekranie dzieje się coś, nad czym nie mają oni kontroli, w szczególności, gdy pojawiają się znikąd nowe okna. Pół biedy, jeśli jest w tym jakiś sens, (choć w tej chwili nie mogę wymyślić żadnego przykładu, gdzie otwieranie kaskady nowych okienek byłoby uzasadnione), ale najczęściej przy otwieraniu strony okienka wyskakują albo aby wyświetlić reklamy, albo żeby poinformować mnie jaką mam przeglądarkę i system operacyjny (często błędnie). Dlatego wszyscy chyba internauci wykształcili u siebie odruch polegający na tym, że po kliknięciu w jakiś odsyłacz czekają chwilę, żeby pozamykać wszystkie okna, które się zaraz pojawią. Nawet jeśli uważasz, że nowo otwarte okno może być przydatne użytkownikowi, pozwól mu o tym samemu zdecydować - umieśc odsyłacz, który będzie otwierał takie okno, niech nie otwiera się ono automatycznie przy załadowaniu strony.

Po trzecie: początkujący twórcy stron (ale często także i doświadczeni - niestety) często mają ochotę za użytkownika zadecydować, jak powinno wyglądać okno jego przeglądarki. Chcą oni, aby automatycznie otwierało się nowe okno o określonych właściwościach, a stare zamykało. Najczęściej chcą oni, aby ich strona była zawsze oglądana w trybie pełnoekranowym, albo w oknie bez paska menu, statusu i narzędzi, albo bez pasków przewiajania. I następnie na swojej stronie odtwarzają funkcje normalnie pełnione przez standardowe przyciski przeglądarki. Takim anty-wzorem może być strona Montera z RMF (http://www.rmf.pl/ludzie/monter/) - tak właśnie moim skromnym zdaniem nie powinna się zachowywać "dobrze wychowana" witryna WWW. Ja, kiedy natrafię na stronę, która próbuje się przeładować do nowego okna, które najczęściej nie wygląda tak, jak sobie tego życzę, natychmiast wciskam Esc, Backspace albo Alt+F4. I nie tylko ja. Czy naprawdę nie chcielibyście, aby odwiedzający waszą stronę zostawali tam dłużej niż 3 sekundy?

Dobrze, wystarczy tego pouczania:) Jeśli jeszcze nie udało mi się was zniechęcić do wykorzystywania metody window.open() i macie pewność, że będzie to jej uzasadnione użycie, zapraszam do dalszej lektury.




[ Powrót na górę ]







Metoda 'window.open()'





Do otwierania nowych okien służy w JS metoda open() obiektu window. Nie będę tu szczegółowo opisywał jej składni, zamiast tego - "wizard", który generuje odpowiedni kod (o tym, co z tym kodem należy zrobić - dalej ("Wywołanie skryptu").





Otwórz nowe okno


Własność
Wartość


Pasek narzędzi



Pasek adresu



Pasek "Łącza"



Pasek statusu



Pasek menu



Paski przewijania



Możliwa zmianarozmiaru



Pełny ekran (tylko IE)



Tryb kanałowy (tylko IE)



Szerokość



Wysokość



Odległość od górnej krawędzi ekranu



Odległość od lewej krawędzi ekranu



Nazwa okna



Adres strony



Wygenerowany kod:



Zaznacz te elementy, które ma posiadać nowe okno. "Pełny ekran" oznacza pracę w tzw. trybie kioskowym, czyli bez żadnych widocznych ramek czy pasków. Aby zamknąć takie okno najlepiej użyć skrótu klawiaturowego Alt+F4. Z kolei "Tryb kanałowy" otwiera podobne okno, ale z widocznym paskiem menu, z atrybutem autoukrywania oraz paskiem kanałów. Rozmiary okna mogą w zasadzie być dowolne, ale przeglądarki nakładają zarówno górne jak i dolne ograniczenia. Również pozycja okna na ekranie nie jest całkiem dowolna - Netscape nie pozwala na otwarcie okna poza widoczną częścią ekranu (da się to zrobić w Explorerze). W polu "Adres strony" wpisz adres pliku, który ma zostać załadowany do okna. Znaczenie pola "Nazwa okna" jest wyjaśnione później ("Wywołanie skryptu").





[ Powrót na górę ]







Wywołanie skryptu






Dobrze, a co zrobić z tym kodem, który pojawił się w okienku? Odpowiedź: skopiować i wkleić w odpowiednim miejscu skryptu. A które miejsce będzie odpowiednie, to zależy od tego, co chcesz zrobić. Zakładam tu, że wiesz, jak w ogóle umieszcza się skrypty na stronach - jeśli nie wiesz, zajrzyj do działu "Teoria".

Pierwszy, najprostszy przypadek - okno otwierane jest poprzez kliknięcie zwykłego odsyłacza. Przyjmijmy dla uproszczenia, że kod wygenerowany wcześniej to po prostu window.open(). Wtedy nasz odsyłacz będzie wyglądał tak:

<a href="strona.html" onclick="window.open(); return false"
target="_blank">Odsyłacz</a>


Zwróć uwagę, że adres odsyłacza jest okreśony normalnie, a kod otwierający okno znajduje się w atrybucie onclick. Dzięki temu taki odsyłacz będzie użyteczny także dla użytkowników przglądarek nie obsługujących JS. Możesz jako cel (href) podać ten sam plik, który otwierany jest w oknie, ale możesz tam też umieścić inny adres, wersję "bezskryptową" strony. Fragment return false "odwołuje" zdarzenie kliknięcia w odsyłacz, tak więc jeśli obsługiwany jest JS, adres podany tradycyjną metodą nie zostanie już otwarty.

Możemy też, rzecz jasna, wywoływać metodę window.open() także wewnątrz bardziej skomplikowanych skryptów. Wtedy przyda nam się fakt, że wartością zwrotną tej metody jest nowo utworzony obiekt typu window. Oto przykład takiego skryptu:

okno = window.open('about:blank', 'moje_okno', '');
okno.document.write('Hello world');
okno.setTimeout('self.close', 5000);

drugie = window.open('about:blank', 'moje_okno2', '');
drugie.document.write('To okno zaraz się zamknie');
drugie.close();


Zwróć uwagę, że nazwa okna podawana jako agrument metody open nie ma nic wspólnego ze zmienną, której przypiszemy to okno (ani z tytułem dokumentu, jak niektórym się na początku wydaje). Jest to odpowiednik nazwy ramki jeśli korzystamy ze znacznika <frame> - tę nazwę możemy wkorzystać ustalając atrybut target odsyłaczy - w ten sposób możemy wykorzystywać ponownie okno. Użyte w przykładzie metody write, setTimeout i close odpowiednio: wpisują tekst (lub kod HTML) do dokumentu, odraczają wykonanie podanego kodu o daną liczbę milisekund i zamykają okno (o tym już za chwilę). Na uwagę zasługuje jeszcze słówko self - to nic innego, jak prosty sposób na odniesienie się do bieżącego okna. Na marginesie: możliwy jest bezpośredni dostęp do wartości zmiennych przynależnych do innego okna - można je wszystkie traktować jako własności tego obiektu, czyli np. jeśli w oknie drugie zdefiniowana byłaby zmienna x, można byłoby się do niej odwoływać z innych okien jako drugie.x. Ze względów bezpieczeństwa przeglądarka nie pozwala jednak na taką komunikację między oknami pochodzącymi z różnych witryn.

Możliwe jest jeszcze otwieranie okien przy pewnych zdarzeniach, np. przy ładowaniu albo zamykaniu strony. Nie będę jednak tego tu opisywać, aby nie szerzyć złych zwyczajów. Każdy, kto już poznał trochę JS i tak szybko domyśli się, jak to zrobić.



[ Powrót na górę ]







Zamykanie okien





Równie często, jak otwierać nowe okna "webmasterzy" chcą inne zamykać. To jest również możliwe - służy do tego, wspomniana już metoda window.close(). To, jak ją wywyoływać pozostawiam inwencji czytelników, oto parę przykładów:

// zamknij bieżące okno:
self.close();
// zamknij bieżące okno, z uwzględnieniem ramek:
top.close();
// zamknij okno spod zmiennej 'okienko':
okienko.close();


Jeżeli wywołamy tę metodę na oknie otwartym wcześniej przez nasz skrypt, zostanie ono bez szemrania zamknięte. Jeżeli jednak spróbujemy zamknąć inne okno, przeglądarka zapyta najpierw użytkownika, czy się na to zgadza. Na szczęście nie da się tego ominąć w przypadku normalnej strony WWW.



[ Powrót na górę ]







Koniec





To by było na tyle, jeśli chodzi o otwieranie okien na świat. Sumowanie zysków bez strat w następnym odcinku :-) (pozdrowienia dla całej czternastki). Mam nadzieję, że udało mi się odwieśc przynajmniej kilka osób od uprawiania "piractwa skryptowego" i otwierania niepotrzebnych okienek oraz, że udało mi się w miarę przejrzyście wyjaśnić manipulacje oknami w JS tym, którzy nie mieli takich złych intencji. Ale powtórzę po raz kolejny: zachowajcie umiar i nie zniechęcajcie innych do JavaScriptu wykorzystując go bez zastanowienia.



[ Powrót na górę ]









 




Szybki skok:


Czemu lepiej tego ni...


Metoda 'window.open()'


Wywołanie skryptu


Zamykanie okien


Koniec


 


JavaScript:


Teoria


Przykłady


Warsztat


Otwieramy okna


JS w akcji


Linki


 


O autorze:


E-mail


Strona domowa


 


Znajdź w JSwp:( Jak szukać? )


Aby otrzymywać informacje o aktualizacjach na tych stronach, podaj swój e-mail:


Wersja offline




















© 1998-2000 Maciej Szczepaniak