[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 wstawić obrazek?

Cześć! Jesteś tu zapewne dlatego, bo nie wiesz jak wstawić zdjęcie na stronę. W tym wpisie nauczysz się wstawiać obrazek na stronę www zarówno jako tylko obrazek, ale też obrazek jako klikalny odnośnik. Przejdźmy zatem do nauki... Wstawianie obrazka Do wstawiania grafiki na stronę służy znacznik img z atrybutami src oraz alt . Atrybutem wymaganym jest src - adres źródłowy (adres grafiki, którą chcemy wstawić na stronę). Atrybut alt - zawiera tekst alternatywny, który zostanie wyświetlony, gdy wczytanie obrazka się nie powiedzie. Podsumowując, aby wstawić zdjęcie piszemy następujący fragment kodu: <img src="images/flower.jpg" alt="Kwiatek" /> Link z obrazkiem A teraz połączenie odnośnika z obrazkiem, czyli zastąpienie tekstu w linku zdjęciem: <a href="https://www.ukodowani.pl"><img src="images/banner.jpg" alt="ukodowani.pl" /></a> Możesz również ustawić zdjęcie jako tło . Jeśli chcesz dowiedzieć się j
Czytaj więcej

[PHP] Jak pobrać adres strony?

Gdy zajdzie potrzeba pobrania adresu strony, na której użytkownik aktualnie się znajduje, posłużyć się można do tego celu tablicą $_SERVER z kluczem 'SERVER_NAME'. Pobranie adresu strony, na której znajduje się użytkownik sprowadza się dosłownie do połączenia dwóch elementów tablicy $_SERVER: SERVER_NAME oraz REQUEST_URI . Element o kluczu 'SERVER_NAME' zawiera nazwę hosta serwera, na którym wykonywany jest skrypt, a element z kluczem 'REQUEST_URI' pobiera wszystko to, co zostało wpisane po nazwie domeny np. '/index.php'. Tak więc, aby wyświetlić adres strony lub adres do skryptu, łączymy te dwa elementy: echo $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; Powyższy przykład wyświetli nam URL, pod którym aktualnie się znajdujemy, ale bez przedrostka http/https. Aby do ciągu z URL'em dołączana była nazwa protokołu, musimy użyć jeszcze jednego elementu tablicy $_SERVER, a mianowicie HTTPS , który nie będzie pusty, jeśli żądanie
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