Przejdź do treści

Ramki

Wczytywanie strony do ramki

<a target="cel" href="Tu podaj ścieżkę dostępu do strony">Opis</a>

Jak widać powyższe polecenie jest odsyłaczem. Posiada on jednak dodatkowy atrybut target="...", pozwalający wczytać stronę do wybranej przez nas ramki, w szczególności innej niż ta, w której znajduje się odnośnik (przydatne przy tworzeniu spisu treści).

Zamiast tekstu "Tu podaj ścieżkę dostępu do strony" należy podać lokalizację na dysku, gdzie znajduje się strona, do której chcemy się przenieść.
Natomiast jako "cel" należy podać:
  1. "nazwę ramki", do której ma zostać załadowana strona (nazwę ramki definiuje się wcześniej na stronie startowej w znaczniku FRAME). Jeśli strona ma zostać wczytana do tej samej ramki, w której znajduje się odsyłacz, można pominąć atrybut target="...".

    Podanie nazwy ramki jest przydatne, w przypadku tworzenia strony, składającej się z kilku ramek, z których jedna zostanie przeznaczona na menu z odsyłaczami do wszystkich podstron serwisu. Wtedy właśnie, aby po kliknięciu odnośnika z menu, strona została wczytana nie do menu, lecz do innej przeznaczonej na to ramki, należy użyć tego polecenia.

    W przypadku zwykłych odsyłaczy znajdujących się na normalnych stronach, pomija się ten atrybut.

    Jeśli podamy nazwę ramki, która nie istnieje, spowoduje to otworzenie nowego okna. Następnie będzie można do niego wczytywać dokumenty, podając tą samą nazwę (jeśli użytkownik wcześniej go nie zamknie).

  2. Polecenia specjalne:
    • "_self" - strona zostanie załadowana do bieżącej ramki, czyli do tej na której został wpisany powyższy odsyłacz (domyślnie - można pominąć ten atrybut, a efekt będzie ten sam)
    • "_top" - strona zostanie wstawiona w miejsce dokumentu pierwszego w hierarchii (strony głównej)
    • "_parent" - strona zostanie wstawiona w miejsce dokumentu nadrzędnego w hierarchii, czyli w miejsce strony startowej struktury ramek, w której znajduje się dany odsyłacz (w przypadku większej ilości zagnieżdżonych stron startowych)
    • "_blank" - strona zostanie załadowana w nowym oknie (uruchomi nową kopię przeglądarki)

Przykład:

Aby po wybraniu odsyłacza z lewej ramki ("Spis treści"), dana strona została wczytana do prawej, należy na stronie w lewej ramce wpisać:

<a target="strona" href="ścieżka dostępu">Opis</a>

(zakładamy, że prawa ramka została nazwana właśnie "strona").

Przykład zastosowania target="_self" (domyślnie - można pominąć atrybut target="...", aby uzyskać ten sam efekt): Przykład

Przykład zastosowania polecenia target="_top" oraz target="_parent": Przykład

A oto przykład zastosowania target="_blank" : Przykład

Polecenia "_top" i "_parent" działają bardzo podobnie. Różnicę można zobrazować na przykładzie następującej strony startowej struktury ramek, stanowiącej stronę główną (index.html):

<!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
	<title>Strona główna</title>
</head>
<frameset cols="40%,*">
	<frameset rows="50%,*">
		<frame src="test.html" name="lewagorna" />
		<frame src="test.html" name="lewadolna" />
	</frameset>
	<frame name="prawa" src="index2.html" />
</frameset>
</html>

Strona index2.html, która zostanie wczytana do ostatniej ramki (patrz powyżej), wygląda następująco:

<!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
	<title>Ramka podrzędna</title>
</head>
<frameset rows="30%,*">
	<frame name="prawagorna" src="test.html" />
	<frame name="prawadolna" src="target.html" />
</frameset>
</html>

Jak widać jest to strona zawierająca dwie struktury ramek: index.html oraz index2.html (ta druga znajduje się wewnątrz pierwszej - w prawej ramce głównej). Teraz jeśli na stronie target.html umieścimy odsyłacz z atrybutem target="_top", strona zostanie wczytana w miejsce index.html (strony głównej). Natomiast w przypadku target="_parent", strona będzie wczytana w miejsce index2.html (strony startowej podrzędnej struktury ramek, w której znajduje się odsyłacz).

Przykład:

Zobacz powyższy przykład.


Taki efekt można uzyskać tylko w przypadku określenia dwóch oddzielnych stron (plików) startowych, z których jedna jest podrzędna w stosunku do drugiej. Jeżeli stworzymy taką samą strukturę przy użyciu pojedynczej strony startowej (zobacz: Zagnieżdżanie ramek), atrybut target="_top" będzie równoważny target="_parent":

Przykład

Wczytanie stron do dwóch ramek

Jak łatwo zauważyć, za pomocą pojedynczego odsyłacza można wczytać nową stronę tylko do jednej ramki jednocześnie. Jeśli chcielibyśmy aby po kliknięciu odnośnika zmieniła się zawartość dwóch (lub więcej) ramek, można w tym celu użyć JavaScriptu:

<a href="javascript:void(0)" onclick="parent.nazwaramki1.location.href = 'adres1.html'; parent.nazwaramki2.location.href = 'adres2.html'; return false">...</a>

gdzie "nazwaramki1" i "nazwarammki2" to wartości atrybutów name="..." nadane znacznikom <frame /> na stronie startowej ramek.
Natomiast "adres1.html" oraz "ades2.html" to adresy (lub względne ścieżki dostępu) stron, które chcemy wczytać do wskazanych ramek.

W niektórych przypadkach zamiast parent.nazwaramki trzeba użyć top.nazwaramki (patrz powyżej).

Możliwe jest oczywiście załadowanie więcej niż dwóch ramek. Należy wtedy wpisać dalsze polecenia typu: parent.nazwaramki.location.href = 'adres.html', oddzielone średnikami (";").

Sposób ten nadaje się również dla ramek lokalnych.

Zobacz także

okno (4), rodzic (5), ramki (11), wczytywanie (2), odsyłacz (20), odnośnik (22), hiperłącze (13), link (23), kotwica (18), skrypt (29)

Komentarze

Zobacz więcej komentarzy

Dotacje

Pomogła Ci ta strona? Chcesz, aby dalej się rozwijała?
Dotpay - Bezpieczne transakcje internetowePayPalWpłać dobrowolną dotację...