[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

Popular

[HTML] Jak wstawić obrazek?

Pierwszy artykuł z serii dla zielonych . W tym wpisie nauczymy się wstawiać odnośnik oraz obrazek na stronę www. Wstawianie linku Wstawienie hiperłącza (linku) na stronę www jest bardzo proste i sprowadza się jedynie do napisania jednej linii kodu, a właściwie tagu HTML a z atrybutami. Atrybutem wymaganym jest href - hypertext reference (adres, pod który ma odsyłać odnośnik). Dodatkowy atrybut to title - tytuł, który wyświetli się po najechaniu na link kursorem. Między tagami <a></a> wpisujemy tzw. anchor text czyli tekst, na który klikamy, aby przejść do strony. Wstawianie linku <a href="https://www.ukodowani.pl" title="Blog programistyczny">Blog programistyczny</a> Powyższy kod da wynik Blog programistyczny Wstawianie obrazka Do wstawiania grafiki na stronę służy tag img z atrybutami src oraz alt . Atrybutem wymaganym jest src - źródło (adres grafiki, którą chcemy wyświetlić). Atrybut alt - zawiera tekst alternatywny, który z
Czytaj więcej

[PHP|HTML] Odświeżenie strony

W tym wpisie zajmiemy się odświeżaniem strony z poziomu PHP jak i poprzez odpowiedni tag meta. Zapewne tworząc jakąś stronę HTML nie raz spotkałeś się z tagiem meta refresh . Jak pamiętasz (lub nie) tag ten służy do odświeżania/przekierowania strony z poziomu klienta. W takim razie co zrobić, gdy chcemy takie odświeżenie lub przekierowanie wymusić po stronie serwera? W języku PHP z pomocą przychodzi nam funkcja header , która służy do wysyłania surowych nagłówków HTTP. Funkcja jest prosta w użyciu, a kod odświeżający stronę ogranicza się do jednej linii. My jednak napiszemy własną funkcję, która będzie odświeżała stronę. Nasza funkcja będzie oczywiście oparta o wbudowaną w PHP funkcję header. Odświeżanie strony HTML Aby emulować nagłówki HTTP z poziomu kodu HTML, należy użyć tagu meta http-equiv . Jeśli zatem chcemy odświeżyć lub przekierować stronę z poziomu przeglądarki, tworzymy w sekcji head taki tag: <meta http-equiv="refresh" content="5; url=http://localhost&q
Czytaj więcej

[PHP] Szyfrowanie hasła

Artykuł został zaktualizowany 16/05/2020. Aby zaszyfrować hasło w PHP można użyć jednej z kilku funkcji haszujących. Najpopularniejszymi funkcjami haszującymi są md5 , sha1 i crypt . Jednak te dwie pierwsze nie są rekomendowane jako bezpieczne metody haszowania. Do bezpiecznego haszowania haseł należy używać funkcji password_hash . Haszowanie przy użyciu password_hash $password = 'hasło'; echo password_hash($password, PASSWORD_DEFAULT); // wyświetli hash bcrypt hasła $password Haszowanie przy użyciu md5 $password = '12345'; echo md5($password); // Wyświetli '827ccb0eea8a706c4c34a16891f84e7b' Haszowanie przy użyciu sha1 $password = '12345'; echo sha1($password); // Wyświetli '8CB2237D0679CA88DB6464EAC60DA96345513964' Haszowanie przy użyciu crypt $password = 'hasło'; echo crypt($password); // wyświetli hash crypt hasła $password z wygenerowaną automatycznie solą Porównywanie haszy Do porównania haszy wygenerowanych np. funkc
Czytaj więcej