Przejdź do treści

Wczytywanie strony do ramki lokalnej <a target>

Co zrobić, aby strony z menu wczytywały się do ramki umieszczonej bezpośrednio w treści?

Wczytywanie strony do ramki lokalnej <a target>

<a target="cel" href="lokalizacja">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. Dzięki temu treść w takiej ramce (okienku) może się zmieniać, nawet już po załadowaniu strony.

Zamiast tekstu "lokalizacja" należy wpisać adres strony albo lokalizację na dysku, gdzie znajduje się strona, do której chcemy się przenieść.
Natomiast jako "cel" można podać:
  1. "nazwę ramki", do której ma zostać załadowana strona. Nazwę ramki definiuje się wcześniej w znaczniku IFRAME (atrybut name="nazwa ramki"). Jeśli strona ma zostać wczytana do tej samej ramki, w której znajduje się odsyłacz, można pominąć atrybut target="...". Jeśli podamy nazwę ramki, która nie istnieje, spowoduje to otworzenie nowej karty w przeglądarce. Następnie będzie można do niej wczytywać dokumenty, podając tą samą nazwę (jeśli użytkownik wcześniej jej nie zamknie).
  2. Polecenia specjalne:
    • "_self" - strona zostanie załadowana do bieżącej ramki, czyli do tej na której został wstawiony powyższy odsyłacz (domyślnie - można pominąć ten atrybut, a efekt będzie ten sam)
    • "_top" - strona zostanie wczytana w miejsce głównego dokumentu w hierarchii, czyli zmieni się adres w pasku adresu przeglądarki
    • "_parent" - strona zostanie wczytana w miejsce nadrzędnego dokumentu w hierarchii
    • "_blank" - strona zostanie załadowana w nowej karcie przeglądarki

Atrybuty target="_top" i target="_parent" działają bardzo podobnie. Różnice można zauważyć dopiero w przypadku większej liczby zagnieżdżonych ramek - np. strona w stronie w stronie. Załóżmy, że mamy plik "index.html", w którym umieszczamy taką ramkę:

<iframe src="ramka1.html"></iframe>

Jak widać, spowoduje to osadzenie na stronie ramki i załadowanie do niej dokumentu "ramka1.html". Załóżmy teraz, że w pliku "ramka1.html" znajduje się m.in. taki kod:

<iframe src="ramka2.html"></iframe>

Tutaj znowu osadzamy ramkę, ale tym razem z innym dokumentem. W pliku "ramka2.html" możemy umieścić następujące odsyłacze:

<a target="_top" href="...">Ten link załaduje się w miejsce pliku "index.html"</a>
<a target="_parent" href="...">Ten link załaduje się w miejsce pliku "ramka1.html"</a>
<a href="...">Ten link załaduje się w miejsce pliku "ramka2.html"</a>

Przykład <a target>

Zobacz powyższy 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 "nazwaramki2" to wartości atrybutów name="..." nadane znacznikom IFRAME.
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 albo self.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 (";").

Przeglądarki


Chrome
Firefox
Edge
Opera
Safari
<a target>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Komentarze

Zobacz więcej komentarzy

Facebook