[JavaScript] Nowe okno
Artykuł został zaktualizowany 03/05/2020.
Kolejny artykuł z kategorii JavaScript, który tym razem poświęcony jest obiektowi window i jego metodzie open. Dzięki obiektowi window możemy między innymi otwierać strony w nowych oknach i właśnie tym się zajmiemy w niniejszym artykule.
Obiekt window
Obiekt ten reprezentuje okno przeglądarki i znajduje się najwyżej w hierarchii obiektów JS. Przed obiektem window nie ma żadnego innego. Podobnie jak w innych językach każdy obiekt ma właściwości i metody, do których możemy się odwoływać. Do właściwości lub metody obiektu odwołujemy się poprzez zapis: object.method();
. Jak widać obiekt z metodą łączymy znakiem kropki. A teraz ciekawostka - do metod i właściwości obiektu window możemy odwoływać się bezpośrednio, bez potrzeby poprzedzania ich nazwą obiektu. Np. do metody open nie musimy odwoływać się poprzez zapis window.open();
, a bezpośrednio open();
. Oczywiście nie tworzymy instancji obiektu window, ponieważ jest ona tworzona automatycznie i zawsze możemy używać tego obiektu.
Metoda open
Metoda obiektu window służąca do otwierania nowego okna przeglądarki. Metoda ta może przyjąć następujące opcjonalne argumenty:
- URL - adres strony, która ma zostać otwarta w nowym oknie;
- name - nazwa okna lub atrybut target (_blank, _parent, _self, _top);
- settings - ustawienia okna (string, w którym podajemy parametry w formacie parametr=wartość oddzielone od siebie przecinkami);
- width (px) - szerokość okna
- height (px) - wysokość okna
- top (px) - margines górny
- left (px) - margines lewy
- scrollbars (yes, no, 0, 1) - czy wyświetlać scrollbary
- location (yes, no, 0, 1) - czy wyświetlać pasek adresu
- replace - czy nowa strona w istniejącym oknie ma być nadpisana w historii przeglądania, czy ma być dodana jako nowa pozycja? Podaj wartość true, jeśli chcesz zastąpić rekord w historii nowym, lub false, jeśli chcesz dodać nowy rekord.
Nasza funkcja
Jak widać otwieranie nowego okna w JS przy użyciu metody open jest bardzo proste i sprowadza się do napisania jednej lini kodu:
open('http://localhost','_blank','width=500,height=500,left=50,top=50');
My jednak napiszemy własną funkcje, dzięki której otwarcie nowego okna będzie jeszcze sprawniejsze. Nasza funkcja będzie zawierała w sobie metodę open i przyjmować będzie 4 argumenty: windowUrl, windowTarget, windowWidth, windowHeight. Pozycję nowego okna ustawimy na stałe. Funkcja będzie miała nazwę newWindow:
function newWindow(windowUrl, windowTarget, windowWidth, windowHeight)
{
open(windowUrl, windowTarget, 'width=' + windowWidth + ', height=' + windowHeight + ', top=50, left=50');
return false;
}
Przykładowe użycie funkcji:
<a href="" onclick="return newWindow('http://localhost', '_blank', 200, 200);">otwórz okno</a>
Aby zamknąć nowe okno poprzez kliknięcie w link, należy w zdarzeniu onclick odwołać się do metody close - jest to kolejna z metod obiektu window.
Przykład:
<a href="" onclick="window.close()">
Komentarze
Prześlij komentarz