| Previous | Table of Contents | Next |
| JavaScript Math Object | JavaScript Document Object |
obiekt JavaScript window znajduje się na górze hierarchii obiektów JavaScript i reprezentuje okno przeglądarki (lub okna, jeśli masz więcej niż jedno okno przeglądarki otwarte w tym samym czasie). Do tego rozdziału skupiliśmy się na wewnętrznej i składni JavaScript. W tym rozdziale zaczniemy robić rzeczy na ekranie (co w końcu jest jednym z głównych celów JavaScript). Obiekt okna umożliwia programistom wykonywanie zadań, takich jak otwieranie i zamykanie okien przeglądarki, wyświetlanie okien dialogowych alertów i monitów oraz konfigurowanie timeoutów (określanie akcji, która ma zostać wykonana po określonym czasie). Chociaż Timeouty są cechą obiektu window, omówimy je w rozdziale Timeouts JavaScript, a nie w tym rozdziale.
odwoływanie się do obiektu javascript window
jak opisano w podstawach obiektów JavaScript, zwykle konieczne jest użycie kropka-notacja podczas uzyskiwania dostępu do Właściwości lub metod obiektu. Na przykład następujący fragment skryptu uzyskuje dostęp do metody write () obiektu dokumentu:
document.write("Hello");
obiekt window jest obiektem najwyższego poziomu hierarchii obiektów. W związku z tym, ilekroć w skrypcie odwołuje się do metody lub właściwości obiektu bez nazwy obiektu i przedrostka kropki, JavaScript zakłada, że jest członkiem obiektu window. Oznacza to, na przykład, że podczas wywołania metody window alert() do wyświetlenia okna dialogowego alert okno. prefiks nie jest obowiązkowy. Dlatego następujące wywołania metod osiągają to samo:
window.alert();alert()
zgłoś tę reklamę Właściwości obiektu okna JavaScript
okno JavaScript obiekt zawiera wiele właściwości, które można sprawdzić i wykorzystać w oknie skryptu:
- .closed-używana podczas obsługi wielu okien, ta właściwość wskazuje, czy okno zostało zamknięte, czy nie.
- okno.defaultstatus / window.status-defaultstatus określa domyślny komunikat wyświetlany na pasku stanu przeglądarki. status określa tymczasowy komunikat do wyświetlenia na pasku stanu przeglądarki zamiast domyślnego. Wyłączone w wielu przeglądarkach.
- okno.ramki-jeżeli okno zawiera ramki, tablica ta posiada tablicę obiektów ramek (patrz szczegóły dotyczące dostępu do tablic JavaScript).
- window.name -okna otwierane przez skrypt muszą mieć nazwę. Właściwość ta zawiera nazwę odpowiedniego obiektu okna.
- okno.opener-gdy okno zostało otwarte w skrypcie zawartym w innym oknie, ta właściwość okna potomnego zawiera okno odniesienia, które je otworzyło.
- okno.rodzic-podczas pracy z ramkami w oknie właściwość ta zawiera odniesienie do obiektu window, który zawiera ramkę.
- okno.screen-obiekt, który zawiera informacje o ekranie, na którym okno jest wyświetlane (właściwości zawarte w tym obiekcie to: height, width, availHeight, availWidth oraz colorDepth).
- okno.self-odniesienie do bieżącego okna.
- okno.top-odniesienie do okna najwyższego poziomu podczas pracy z klatkami.
otwieranie okien przeglądarki przy użyciu JavaScript
nowe okno przeglądarki można otworzyć ze skryptu JavaScript przy pomocy metody open() obiektu window. Składnia otwierania nowego okna jest następująca:
newWindowObj = window.open("URL", "WindowName", "feature, feature, feature ... ");
poniżej przedstawiono Wyjaśnienie argumentów przekazywanych do metody open ():
- URL – określa adres URL strony internetowej, która ma zostać załadowana do nowego okna. Jeśli nie podano adresu URL, zostanie załadowane puste okno.
- nazwa okna – Określa nazwę okna i służy do odniesienia się do okna.
- features – oddzielona przecinkami lista funkcji, które pozwalają dostosować wygląd okna. Opcje to:
| ustawienie | Wyjaśnienie |
|---|---|
| szerokość | określa początkową szerokość okna klienta przeglądarki (patrz innerwidth dla rozmiaru obszaru zawartości) |
| wysokość | określa początkową wysokość okna klienta przeglądarki (patrz innerheight dla rozmiaru obszaru zawartości) |
| innerwidth | określa początkową szerokość obszaru zawartości okna |
| innerheight | określa początkową wysokość zawartości okna obszar |
| szerokość zewnętrzna | określa początkową szerokość okna Nawigatora |
| wysokość zewnętrzna | określa początkową wysokość okna Nawigatora |
| pasek narzędzi | określa, czy okno powinno zawierać pasek narzędzi przeglądarki, czy nie |
| status | określa, czy okno powinno zawierać pasek stanu przeglądarki, czy nie |
| zależne | określa, czy okno powinno się zamknąć w zgodzie z jego oknem nadrzędnym |
| pasek menu | określa, czy okno powinno zawiera pasek menu przeglądarki |
| lokalizacja | określa, czy okno powinno zawierać pole Lokalizacja/URL przeglądarki |
| paski przewijania | ukrywa/pokazuje poziome/pionowe paski przewijania przeglądarki |
| możliwość zmiany rozmiaru | określa, czy użytkownik ma prawo zmienić rozmiar okna po jego pojawieniu się. |
| katalogi | określa, czy okno powinno zawierać osobisty pasek narzędzi przeglądarki. |
| copyHistory | określa, czy nowe okno powinno zawierać kopię historii URL okna wywołującego |
| left | określa liczbę pikseli od lewej strony ekranu do nowego okna |
| top | określa liczbę pikseli od góry ekranu do nowe okno |
| alwayslowered | tworzy nowe okno, które jest zawsze umieszczone pod innymi oknami przeglądarki. Często używany do tych irytujących reklam pop-under. |
| Alwaysraised | tworzy nowe okno, które jest zawsze umieszczone nad innymi oknami przeglądarki na ekranie. |
| Z-lock | blokuje poziom wyświetlania się przeglądarki w stosunku do innych okien przeglądarki. |
funkcje wysokości, szerokości i pozycji są ustawiane za pomocą liczb. Pozostałe opcje funkcji można ustawić za pomocą wartości true lub false (również tak, nie oraz 1 i 0 mogą być użyte w miejsce true I false). Nieobecny atrybut jest uważany za fałszywy. Poniższy przykład wytworzy nowe okno z paskiem menu, określonym wymiarem i bez paska narzędzi:
newWindowObj = window.open("URL", "WindowName", "toolbar=0, menubar=1, innerHeight=200, innerWidth=300");
zamykanie okien przeglądarki przy użyciu JavaScript
okno można zamknąć przy użyciu metody close() obiektu window. Nazwa okna (określona w metodzie open ()) powinna być wskazywana podczas zamykania, aby mieć pewność, że zostanie zamknięte właściwe okno. Na przykład poniższy kod tworzy nowe okno i tworzy przycisk, który po kliknięciu zamyka nowe okno:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Close Window" onclick="newWindowObj.close()" /></form>
można również zamknąć okno, które otworzyło bieżące okno przy pomocy właściwości opener bieżącego obiektu window:
window.opener.close()
spowoduje to zamknięcie okna, które otworzyło okno, w którym uruchomiony jest powyższy skrypt.
Przenoszenie i zmiana rozmiaru okien
okno może zostać przeniesione do określonych współrzędnych na ekranie za pomocą metody moveto() obiektu window, która przyjmuje współrzędne x i y jako argumenty. Poniższy przykład przenosi nowe okno do lokalizacji 100, 200 na ekranie po naciśnięciu przycisku „Przenieś okno” :
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" /></form>
oprócz przeniesienia okna do określonej nowej lokalizacji możliwe jest również przesunięcie okna względem jego Aktualnej Lokalizacji na ekranie przy użyciu metody moveBy() obiektu javascript window. Ponownie metoda pobiera wartości x i y, które zostaną dodane do bieżących współrzędnych X i y określonego okna. Wartości ujemne można wykorzystać do zmiany kierunku ruchu:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" /></form>
metody window resizeTo() i resizeBy() działają podobnie, ponieważ pozwalają na zmianę rozmiaru okna do określonego rozmiaru lub do nowego rozmiaru w stosunku do bieżącego rozmiaru.
zmiana ostrości okna
gdy okno jest aktualnie wybranym oknem na ekranie, mówi się, że ma fokus. Zazwyczaj kliknięcie wskaźnikiem myszy w oknie daje mu fokus. W JavaScript można programowo zmieniać ostrość okna za pomocą metod focus() i blur (). Poniższy przykład wyświetla nowe okno, rozmywa je tak, aby okno otwierające nadal miało fokus i zapewnia przycisk do przełączania fokusu na nowe okno:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");newWindowObj.blur();</script><form action="null"> <input type="button" value="Focus New Window" onclick="newWindowObj.focus()" /></form>
wyświetlanie okien dialogowych okien komunikatów
obiekt JavaScript window udostępnia metody wyświetlania trzech typów okien dialogowych wiadomości, okien dialogowych alertu, potwierdzenia i monitu:
- alert – przeznaczony do wyświetlania wiadomości do użytkownika. Zawiera obszar wiadomości, w którym ma być wyświetlony komunikat alertu i przycisk „OK”, który użytkownik może kliknąć, aby zamknąć okno dialogowe. Metoda alert () pobiera pojedynczy argument reprezentujący wiadomość do wyświetlenia w oknie dialogowym. Poniższy fragment strony internetowej wyświetla okno dialogowe z Komunikatem” nie masz poprawnego hasła „po kliknięciu przycisku „Pokaż Alert”:
<form action="null"> <input type="button" value="Show Alert" onclick="window.alert('You do not have a valid password')" /></form>
- potwierdzenie – używane, gdy użytkownik musi uzyskać odpowiedź Tak lub nie. Ten typ okna dialogowego wyświetla komunikat oraz przyciski ” OK ” i „Anuluj”. Metoda confirm () przyjmuje wiadomość do wyświetlenia użytkownikowi jako argument i zwraca true lub false w zależności od tego, czy użytkownik nacisnął „OK”, czy „Cancel”:
- prompt – zaprojektowany, aby umożliwić uzyskanie informacji od użytkownika. Okno dialogowe składa się z wiadomości do użytkownika, pola tekstowego do wprowadzania danych oraz przycisków OK i Cancel. Metoda prompt () pobiera wiadomość do wyświetlenia jako argument i zwraca wartość wprowadzoną przez użytkownika:
<script language="JavaScript" type="text/javascript">function showPrompt(){ var userInput = prompt("Please enter your name:"); document.write("Hello, " + userInput);}</script><form action="null"> <input type="button" value="Show Prompt" onclick="showPrompt()" /></form>
| Previous | Table of Contents | Next |
| JavaScript Math Object | JavaScript Document Object |