Okna i okienka

W przeszłości bardzo często w linkach stosowało się atrybut target="_new", który nakazywał otwierać strony w nowym oknie. W3C na szczęście stwierdziło, że nie ma podstawy używania tego atrybutu. Dzisiejsze wszystkie [dobre] przeglądarki pozwalają na otwieranie stron w zakładkach i to od użytkownika zależy, co wybierze - nową kartę, okno czy ten sam widok.

Za pomocą Javascriptu możemy otwierać nowe okna, formatować ich wygląd, przesyłać między nimi informacje itp.

Pamiętaj, że większość przeglądarek domyślnie blokuje wszelkie próby otwarcia nowego okna, dlatego lepiej nie uzależniać działania naszej strony od okienek. O wiele lepszym pomysłem jest używanie dynamicznie pozycjonowanych warstw (np DIV).

Otwieranie nowego okna

Standardowa konstrukcja otwierająca okno ma postać:


window.open(url, name, options)

W miejscu url wstawiamy adres do strony która ma być umieszczona w nowo otwartym oknie. W miejscu name podajemy nazwę okna, którą będziemy wykorzystywać przy korzystaniu z atrybutu target. W miejscu ustawienia nowego okna umieszczamy opcjonalnie ustawienia nowo powstałego okna. Ustawienia te mogą wyłączać nam menu standardowe, ustawiać wysokość i szerokość naszego okna itp.

Poniżej zamieszczam wszystkie możliwe ustawienia okna:

Directories - wartość yes lub no (1 lub 0): pokazuje lub ukrywa przyciski katalogów
Location - wartość yes lub no (1 lub 0): pokazuje lub ukrywa pasek adresowy
Menubar - wartość yes lub no (1 lub 0): pokazuje lub ukrywa menu przeglądarki
Resizable - wartość yes lub no (1 lub 0): określa czy okno może zmienić rozmiar
Scrollbars - wartość yes lub no (1 lub 0): pokazuje lub ukrywa paski przewijania
Status - wartość yes lub no (1 lub 0): pokazuje lub ukrywa pasek statusu
Toolbar - wartość yes lub no (1 lub 0): pokazuje lub ukrywa standardowy pasek narzędzi
Height - wartość w pixelach (1 lub 0): ustawia wysokość okna
Width - wartość w pixelach (1 lub 0): ustawia szerokość okna
Channelmode tylko IE - wartość yes lub no (0 lub 1): pokazuje lub ukrywa listę kanałów CDF
Fullscreen tylko IE - wartość yes lub no (0 lub 1): ustala czy okno ma mieć standardowy rozmiar czy też ma być rozciągnięte na cały ekran
Top - wartość w pixelach : ustawia położenie okna względem góry ekranu
Left - wartość w pixelach : ustawia położenie okna względem lewej strony ekranu

Wszystkie powyższe właściwości są typu boolean. Oznacza to, że jeżeli nie podamy ich wartości (0 lub 1), to domyślnie przypisana zostanie im wartość true (1). W niektórych przeglądarkach trzeba zwracać uwagę, by przy wypisywaniu kolejnych właściwości nie używać spacji. Może to powodować błędy.

Kod funkcji, która otworzy nowe okno może mieć postać:


<input type="button" value="Pokaz Okno" id="guzikOkna" />

function okno(url) {
    var noweOkienko = window.open(url, 'tytul-okna', 'toolbar=0,menubar=0,scrollbars=0,resizable=0,status=0,location=0,directories=0,top=20,left=20,height=500,width=700');
}

document.getElementById('guzikOkna').addEventListener('click', function() {
    okno('http://google.pl')
});

Modyfikacja okna

Dzięki przypisaniu nowego okna pod zmienną, możemy nim w łatwy sposób manipulować. Zasady są identyczne jak dla skryptów w głównym oknie przeglądarki - jedyna różnica polega na odwołaniu:


window.document //dokument w oknie przeglądarki

noweOkienko.document //dokument w nowym oknie
noweOkienko.document.getElementsByTagName('body')[0] //pobieramy sekcję body w nowym okienku
noweOkienko.document.getElementsByTagName('p').style.fontSize = '20px' //ustawiam wielkość czcionki dla wszystkich akapitów w nowym oknie
noweOkienko.width = '400'; //ustawiam szerokość okienka na 400px
noweOkienko.moveTo(100,100); //przesuwam okienko do pozycji 100x100
noweOkienko.close() //zamyka okienko

Jak widać powyżej otwarte okno możemy dodatkowo formatować za pomocą metod i właściwości.
Trzeba jednak przy takich modyfikacjach uważać, bo dzisiejsze przeglądarki nie sa tak głupie jak kiedyś i część takich działań zwyczajnie blokują.

Okna on-the-fly

Dzięki temu, że możemy odwoływać się do dokumentu w nowym oknie, możemy dynamicznie generować jego treść:


function noweOkno() {
    var noweOkno = window.open('', 'okno', 'toolbar=no,location=no,width=200,height=200');

    with (noweOkno) {
        document.writeln('<html>');
        document.writeln('<head>');
        document.writeln('<title>Tytuł okienka</title>');
        document.writeln('<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />');
        document.writeln('</head>');
        document.writeln('<style>');
        document.writeln('body {text-align:center; margin:20px; font-size:20px;}');
        document.writeln('strong {font-size:230px; display:block; text-align:center;}');
        document.writeln('</style>');
        document.writeln('<body>');
        document.writeln('<p>W tym okienku mieszka Sandman <strong>☃</strong></p>');
        document.writeln('</body>');
        document.writeln('</html>');
        document.close(); //kończymy zapis do dokumentu
    }
}

document.getElementById('guzikOkna2').addEventListener('click', function() {
    noweOkno()
});

Właściwość opener

Jedną z ciekawszych właściwości otwartych okien jest właściwość opener. Dzięki niej możemy się odwoływać do okna, z którego utworzyliśmy nowe okno.


opener.location.href = '#rozdzial_1';

Powyższy kod przeniesie stronę w głównym oknie (z którego otworzyliśmy nowe okno) do kotwicy rozdzial_1.

Metody i właściwości obiektu WINDOW

Poniżej przedstawiam metody i właściwości z których możemy korzystać przy pracy z okienkami. Oczywiście nie ze wszystkich jest sens korzystać, ale korzystanie z większości z nich daje dość ciekawe efekty:

Właściwość:Opis:
closed - zwraca wartość czy okno jest zamknięte czy nie
defaultStatus - ustawia/zwraca domyślny status okna
document - zwraca odwołanie do dokumentu w oknie
event - zwraca obiekt event (1, 2)
frames - zwraca odwołanie do obiektu frames
history - zwraca odwołanie do historii skoków danego okna
innerHeight - zwraca/ustawia wysokość zawartości okna
innerWidth - zwraca/ustawia szerokość zawartości okna
length - zwraca ilość ramek dla danego okna
location - zwraca/ustawia adres strony w aktualnym oknie
locationbar - zwraca obiekt locationbar, którego widoczność można ustawić dla danego okna
menubar - zwraca obiekt menubar, którego widoczność można ustawić dla danego okna
name - zwraca/ustawia nazwę okna
navigator - zwraca obiekt navigator
opener - zwraca odwołanie do okna, z którego utworzono dane okno
outerHeight - zwraca wysokość zewnętrzną okna przeglądarki
outerWidth - zwraca szerokość zewnętrzną okna przeglądarki
pageXOffset - zwraca wielkość kawałka strony, który został ukryty po przesunięciu strony w prawo
pageYOffset - zwraca wielkość kawałka strony, który został ukryty po przesunięciu strony w dół
parent - zwraca dokument ze zdefiniowanymi ramkami
personalbar - zwraca obiekt personalbar, którego widoczność można ustawić dla danego okna
screen - zwraca obiekt screen (np. screen.colorDepth)
screenX - zwraca lewe położenie okna na ekranie
screenY - zwraca górne położenie okna na ekranie
scrollbars - zwraca obiekt scrollbars, którego widoczność można ustawić dla danego okna
self - zwraca odwołanie do aktualnego okna
status - zwraca/ustawia tekst na statusie danego okna
statusbar - zwraca obiekt statusbar, którego widoczność można ustawić dla danego okna
toolbar - zwraca obiekt toolbar, którego widoczność można ustawić dla danego okna
top - zwraca odwołanie do okna położonego najwyżej w hierarchii
Metoda:Opis:
alert() - wywołuje okno alert
back() - wraca do strony poprzedniej w historii skoków
blur() - ustawia aktualne okno pod innymi oknami
close() - zamyka aktualne okno. Okno główne przeglądarki pyta o potwierdzenie zamknięcia
confirm() - wywołuje okno confirm
focus() - ustawia aktualne okno na pierwszym planie (ponad innymi oknami)
forward() - skacze do następnej strony w historii skoków
home() - wraca do strony startowej
moveBy(x,y) - przesuwa aktualne okno o dane wartości x,y
moveTo(x,y) - przesuwa aktualne okno do x,y
open() - otwiera nowe okno
print() - drukuje zawartość strony
prompt() - otwiera okno dialogowe prompt
resizeBy(x,y) - zmienia rozmiar okna o dane wartości x,y
resizeTo(x,y) - zmienia rozmiar okna do x,y
scroll(x,y) - przewija zawartość strony do x,y
scrollBy(x,y) - przesuwa zawartość strony o dane wartości x,y
scrollTo(x,y) - przewija zawartość strony do x,y
stop() - zatrzymuje ładowanie zawartości strony (to samo co po naciśnięciu przycisku STOP w przeglądarce)