Ramki pływające (iframe) - Kurs języka HTML

Ramki pływające są specjalnym typem ramek, które można umieścić w treści strony podobnie jak się umieszcza np. obrazki. Podobnie jak zwykłe ramki, ten typ ramek też ma swoich zwolenników i przeciwników. Ja osobiście odradzam ich stosowanie - więcej na ten temat znajdziesz we wstępie do lekcji Ramki w HTML.

Podobnie jak zwykłe ramki, ramki pływające nie są dozwolone gdy chcesz używać DOCTYPE (X)HTML Strict - musisz użyć wersji Transitional lub Frameset. Z tego też powodu wszystkie przykłady będę prezentował na osobnych podstronach (ta strona używa DOCTYPE XHTML 1.0 Strict).

Aby wstawić ramkę pływającą na stronę, należy użyć znacznika <iframe>. Najprostszy sposób wstawienia ramki pływającej na stronę wygląda następująco:

<iframe src="ramka_iframe.html" width="400" height="300">
Twoja przeglądarka nie obsługuje ramek pływających!
</iframe>

Kliknij aby zobaczyć

W przykładzie powyżej podane są następujące atrybuty dla znacznika <iframe>:

• src - określa adres dokumentu który zostanie załadowany do ramki;
• width - określa szerokość ramki w pikselach;
• height - określa wysokość ramki w pikselach;

Dodatkowo wewnątrz znacznika umieszczony jest tekst który pojawi się na stronie w przypadku gdy przeglądarka nie obsługuje ramek pływających. Użyłem tutaj tekstu standardowego który pojawia się na wielu stronach internetowych, ale sugeruję jednak wstawić tam coś innego, co pozwoli np. osobie posiadającej starszą wersję przeglądarki na wyświetlenie informacji z ramki pływającej (np. link do dokumentu z ramki).

Ramki pływające są traktowane jako obiekty "inline", czyli są wyświetlane "w linii", w odróżnieniu od elementów blokowych. Ten przykład wyjaśni o co mi dokładnie chodzi:

tekst tekst 
<iframe src="ramka_iframe.html" width="400" height="300">
Twoja przeglądarka nie obsługuje ramek pływających!
</iframe> tekst tekst

Kliknij aby zobaczyć

Ramki pływające domyślnie posiadają obramowanie. Aby je zlikwidować, ustaw atrybut frameborder na 0:

<iframe src="ramka_iframe.html" width="400" height="300" frameborder="0">
Twoja przeglądarka nie obsługuje ramek pływających!
</iframe>

Kliknij aby zobaczyć

Podobnie jak w przypadku zwykłych ramek, można kontrolować czy paski przewijania mają się pojawić lub nie. Służy do tego atrybut scrolling. Można do niego przypisać następujące wartości:

• auto - wartość domyślna. Paski przewijania pojawią się tylko wtedy gdy to będzie konieczne;
• yes - paski przewijania zawsze będą widoczne (jeżeli zawartość ramki nie będzie wymagała przewijania, pasek przewijania będzie nieaktywny);
• no - paski przewijania nie będą wyświetlane. Jeżeli zawartość ramki będzie wymagała przewinięcia, jedynym sposobem dostania się do treści poniżej jest przyciśnięcie lewego przycisku myszy w ramce i przeciągnięcie w dół, lub użycie kółeczka na myszce (ale te sposoby nie zawsze dzialają - w Firefox'ie nie działa żaden z nich, w IE działa tylko przeciąganie. W Operze i Netscape Browser'ze działają obydwa).

<iframe src="ramka_iframe.html" width="400" height="300" scrolling="no">
Twoja przeglądarka nie obsługuje ramek pływających!
</iframe>

Kliknij aby zobaczyć

Można też określić szerokość marginesów pomiędzy krawędzią ramki a wyświetlanym w niej dokumentem - służą do tego atrybuty marginwidth (margines w poziomie) i marginheight (margines w pionie). Obydwie wartości podaje się w pikselach:

<iframe src="ramka_iframe.html" width="400" height="300" 
    marginwidth="50" marginheight="30">
Twoja przeglądarka nie obsługuje ramek pływających!
</iframe>

Kliknij aby zobaczyć

Możliwe jest także określenie szerokości odstępu od tekstu otaczającego ramkę pływającą. Służą do tego atrybuty hspace (odstęp w poziomie) i vspace (odstęp w pionie). Te atrybuty działają jednak tylko w IE i Operze, a nie działają w Firefox'ie i Netscape Browserze.

tekst tekst tekst tekst<br>
tekst<iframe src="ramka_iframe.html" width="400" height="300" 
    hspace="30" vspace="50">
Twoja przeglądarka nie obsługuje ramek pływających!
</iframe>tekst<br>
tekst tekst tekst tekst

Kliknij aby zobaczyć

Ramce pływającej można też przypisać nazwę, za pomocą której można się do niej odwołać jako miejsca docelowego dla odnośnika, lub z poziomu JavaScript. Służy do tego atrybut name:

<a href="ramka1.html" target="ramka">Kliknij tutaj</a><br>
<iframe src="ramka_iframe.html" width="400" height="300" name="ramka">
Twoja przeglądarka nie obsługuje ramek pływających!
</iframe>

Kliknij aby zobaczyć

Wykop tą stronę! >>>