HTML & CSS dla początkujących (Część 24): Ramki (iFrames)

iFrames są od dawna standardem HTML. W HTML 4.0 zostały one jednak umieszczone wariantem HTML Frameset razem z obecnie odradzanymi ramkami. Ramki nie są już brane pod uwagę w HTML5, natomiast osadzone ramki (iFrames) tak.

Za pomocą iFrames można osadzać inne strony internetowe. Przeglądarka renderuje więc kolejny plik HTML w obrębie bieżącej strony internetowej. Zawartość okna iFrame można formatować indywidualnie.

Gdy mowa o iFrames, oczywiście należy ponownie skoncentrować się na bezpieczeństwie tej technologii HTML. Problemem tutaj jest złośliwy kod, który może zostać podsunięty niezauważenie na strony internetowe poprzez iFrames. Jest to oczywiście ogromny problem.

W HTML5 istnieją jednak odpowiednie mechanizmy zabezpieczające, dzięki którym można uniknąć tych problemów. Więcej informacji na ten temat znajdziesz w dalszej części tego samouczka. Jednak przed użyciem iFrames należy pamiętać, że potencjalnie stanowią one zagrożenie, zwłaszcza że nowe atrybuty związane z bezpieczeństwem nie są jeszcze obsługiwane przez wszystkie przeglądarki.

W HTML5 iFrames są zatem częścią standardu i posiadają kilka dodatkowych atrybutów. Poniższy przykład pokazuje, jak można zdefiniować iFrames.

<iframe src="http://www.psd-tutorials.de/" 
   width="420" 
   height="350">
   <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a>
</iframe>

W przeglądarce wygląda to następująco:

Elementowi iframe przypisano atrybut src. src zawiera jako wartość stronę, która ma być wyświetlana. Może to być plik lokalny lub, jak w przykładzie pokazanym powyżej, odwołanie do zewnętrznego zasobu.

Atrybutami width i height określa się szerokość i wysokość iFrame'a. Jeśli osadzona zawartość jest większa niż podana wielkość iFrame'a, pojawią się paski przewijania.

Pomiędzy tagami otwierającym i zamykającym <iframe> można zdefiniować dowolne treści. Jednak widoczne są one tylko w przeglądarkach, które nie znająelementu iframe.

W HTML5 wprowadzone są nowe atrybuty dotyczące iFrames, które głównie mają związek z tzw. zachowaniem piaskownicy (sandbox).

W przeglądarkach zasada Jednolitej Tożsamości (Same Origin Policy) uniemożliwia manipulowanie osadzonego na stronie internetowej podczas jej wyświetlania. Ta funkcja bezpieczeństwa ma sens. Niemniej jednak nie zawsze jest idealna. Dlatego w HTML5 wprowadzono atrybut sandbox, który pozwala przeglądarkom jasno określić, jakie uprawnienia powinny zostać przydzielone osadzonej treści pochodzącej z zewnętrznej strony w iFrame.

<iframe 
   sandbox="allow-forms" 
   src="getusercontent.cgi?id=12193">
</iframe>

iFrames, które są wyposażone w atrybut sandbox, nie mają dostępu do DOM osadzonej strony internetowej. Ponadto nie mogą wykonywać skryptów ani przechowywać plików cookie. Ograniczenia te można znosić za pomocą różnych wartości sandboxu.

Różnym wartościom atrybutu sandbox można przypisywać różne wartości. Poprzez allow-forms osadzona strona internetowa może zbierać informacje od użytkownika za pomocą formularzy. Użytkownicy nie wiedzą, że formularz nie pochodzi z bieżącej strony.

Jeśli jednak użyjemy wartości allow-some-origin, osadzona strona internetowa będzie traktowana tak, jakby pochodziła z tej samej domeny. Ta wartość uchyla zasadę Jednolitej Tożsamości.

Wartość allow-top-navigation pozwala osadzonej treści zmieniać zawartość najwyższego kontekstu przeglądania.

I jest jeszcze allow-script. Dzięki temu na osadzonej stronie internetowej może być zawarty JavaScript, który może manipulować stronę osadzoną.

Oto przykład, jak mogłoby wyglądać odpowiednie zastosowanie atrybutu sandbox:

<iframe 
   sandbox="allow-same-origin"
   src="http://www.psd-tutorials.de/">
</iframe>

Możecie także przypisać kilka wartości. Muszą być one oddzielone spacją. Ponownie, przykład:

<iframe 
   sandbox="allow-same-origin allow-forms allow-scripts"
   src="http://www.psd-tutorials.de/">
</iframe>

iFrames zazwyczaj mają na celu osadzanie zewnętrznych treści. Alternatywnie jednak można je także inkludować.

<iframe 
   src="http://www.psd-tutorials.de/" 
   width="200" height="150" 
   seamless>
</iframe>

Ten atrybut ma dużą wartość. Poniższe elementy odwołania w dołączonym dokumencie – jeśli nie zdefiniowano inaczej – są wyświetlane w oknie przeglądarki, w którym zdefiniowany został element iframe (podczas normalnego osadzania, elementy odwołania – jeśli nie zdefiniowano inaczej – są wyświetlane w oknie iFrame).

seamless jest obecnie obsługiwane tylko przez Google Canary, czyli wersję deweloperską tej przeglądarki.

Drugi efekt dotyczy arkuszy styli. Arkusze styli pliku zawierającego plik są także stosowane do dokumentu dołączonego. (Podczas normalnego osadzania, deklaracje arkuszy styli nie są uwzględniane).

Nowy atrybut został wprowadzony. Za pomocą srcdoc można bezpośrednio zdefiniować osadzoną zawartość. Oto przykład:

<iframe sandbox="allow-same-origin allow-forms allow-scripts" 
seamless="seamless" srcdoc=" 
   <script>
      top.location.href=" http://www.psd-tutorials.de/"
   </script>">
</iframe>

W tym przypadku brakuje więc atrybutu src, za pomocą którego wskazywany jest plik do załączenia.





Zawartość określona za pomocą atrybutu srcdoc jest traktowana tak, jakby pochodziła z obcego serwera. Podlega więc w pełni zasadzie tego samego źródła. To zachowanie jest interesujące na przykład w kontekście definicji skryptów. Dozwolony jest w nich dowolny kod HTML i JavaScript. Jednakże cudzysłowy i znak „&” muszą być opisane za pomocą odpowiednich znaków " oraz &.

Możecie tu również bezpośrednio zdefiniować stronę, aby wyświetlić pożądaną zawartość.

<iframe sandbox="allow-same-origin allow-forms allow-scripts" 
seamless="seamless" srcdoc="
   <!DOCTYPE html>
<html>
<head>
<title>PSD-Tutorials.de</title>
</head>

<body>
 <p>…</p>
</body>
</html>">
</iframe>

Nie musi to być kompletny plik HTML. Możliwe jest również coś w rodzaju:

<iframe sandbox="allow-same-origin allow-forms allow-scripts" 
seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>">
</iframe>

W przeglądarce wygląda to zatem następująco:





To jest normalna składnia HTML, bez skryptów itd.

Kilka uwag dotyczących atrybutów, które dotychczas służyły do stylizacji: rzeczy takie jak scrolling, marginwidth i marginheight nie są już dozwolone w HTLM5. Te atrybuty zostały zastąpione przez CSS.