[JavaScript] Nowe okno

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 lub aktywną kartę 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();. 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 po otwarciu okna 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;
  • target - nazwa dla przeglądanego kontekstu lub specjalna nazwa (_blank, _parent, _self, _top), domyślnie _self;
  • windowFeatures - 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 przeglądarki przy użyciu metody open nie jest zbyt skomplikowane i sprowadza się do napisania jednej lini kodu: open('https://www.google.pl','_blank','width=500,height=500,left=50,top=50');

Pójdźmy dalej i napiszmy własną funkcje, dzięki której otwarcie nowego okna będzie jeszcze sprawniejsze. Funkcja będzie oczywiście korzystać z metody open i przyjmować będzie 4 argumenty: windowUrl, windowTarget, windowWidth, windowHeight. Pozycja nowego okna niech będzie ustawiona na stałe. Tworzymy zatem funkcję o 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

<a href="" onclick="return newWindow('http://localhost', '_blank', 200, 200);">otwórz okno</a>

Komentarze

Prześlij komentarz

Dzięki za komentarz!

Popular

[HTML] Jak wyśrodkować tekst?

Wyśrodkowanie tekstu w HTML nie jest trudne. Wystarczy tylko zastosować odpowiednią regułę CSS dla elementu, w którym znajduje się dany tekst. W tym przypadku chodzi o regułę text-align:center . Przykład Załóżmy, że mamy nagłówek h1 z tytułem strony i chcemy, aby był on umieszczony po środku. Dopisujemy do niego następujący fragment: style="text-align:center;" - tak jak poniższym przykładzie: <h1 style="text-align:center;">Hello World!</h1> Analogicznie robimy dla innych elementów HTML.
Czytaj więcej

[C++] Jak obliczyć pole i obwód trapezu?

Przed napisaniem programu obliczającego pole i obwód trapezu, przypomnij sobie wzory. Pole trapezu liczymy według wzoru P=((a+b)*h)/2. Wzór na obwód Ob=a+b+c+d. Obliczając pole trapezu musimy znać rozmiary dwóch podstaw i wysokości. Obliczamy pole trapezu #include <iostream> using namespace std; int main() { int a; int b; int h; double p; cout << "Podaj długość podstawy a: "; cin >> a; cout << "Podaj długość podstawy b: "; cin >> b; cout << "Podaj wysokość: "; cin >> h; if(cin.good() == true) { p = ((a + b) * h) / 2.0; cout << "Pole trapezu wynosi: " << p; } return 0; } Obliczamy obwód trapezu #include <iostream> using namespace std; int main() { int a, b, c, d, ob; cout << "Podaj długość boku a: "; cin >> a; cout << "Podaj długość boku b: "; cin >> b; cout << "Podaj długość boku c: "; cin >> c;...
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 metatag HTML. Zapewne tworząc lub modyfikując jakąś stronę HTML spotkałeś/-aś się kiedyś z tagiem meta refresh . Jak pamiętasz (lub nie) tag ten służy do odświeżania lub przekierowania na inny URL 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 do przeglądarki. Funkcja jest prosta w użyciu, a kod umożliwiający odświeżenie strony 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 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...
Czytaj więcej