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 warst (np DIV).
Standardowa konstrukcja otwierająca okno ma postać:
window.open('url do strony','nazwa strony','ustawienia nowego okna')
W miejscu url do strony wstawiamy adres do strony która ma być umieszczona w nowo otwartym oknie. W miejscu nazwa strony podajemy nazwę strony, którą będziemy wykorzystywać przy korzystaniu z atrybutu target (mało użyteczne). Ma ona znaczenie gdy chcemy korzystać 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ć:
function okno() {
var NoweOkienko = window.open('strona.html', 'strona', 'toolbar=0,menubar=0,scrollbars=0,resizable=0,status=0,location=0,directories=0,top=20,left=20,height=300,width=400');
}
<input type="button" value="Pokaz Okno" id="guzikOkna" />
<script type="text/javascript">
document.getElementById('guzikOkna').onclick = function() { okno('strona.html') }
</script>
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 wiekość czcionki dla wszystkich akapitów w nowym oknie
NoweOkienko.width = '400'; //ustawiam szerokość okienka na 400px
NoweOkienko.moveTo(100,100); //przesówam 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.
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('<body>');
document.writeln('<p>To jest okno utworzone dynamicznie <strong>On-The-Fly</strong></p>');
document.writeln('</body>');
document.writeln('</html>');
document.close() //kończymy zapis do dokumentu
}
}
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 do kotwicy rozdzial_1.
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śc można ustawić dla danego okna |
| menubar | - zwraca obiekt menubar, którego widocznośc 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śc 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śc można ustawić dla danego okna |
| toolbar | - zwraca obiekt toolbar, którego widocznośc można ustawić dla danego okna |
| top | - zwraca odwołanie do okna położonego najwyżej w hierarchi |
| 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) | - przesówa aktualne okno o dane wartości x,y |
| moveTo(x,y) | - przesówa 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) | - przesówa 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ęcu przyciksu STOP w przglądarce) |