Szukaj…
Parametry
| Atrybut | Detale |
|---|---|
name | Ustawia nazwę elementu, do stosowania z a tagu, aby zmienić iframe src . |
width | Ustawia szerokość elementu w pikselach. |
height | Ustawia wysokość elementu w pikselach. |
src | Określa stronę, która będzie wyświetlana w ramce. |
srcdoc | Określa treść, która będzie wyświetlana w ramce, przy założeniu, że przeglądarka ją obsługuje. Treść musi być poprawnym kodem HTML. |
sandbox | Po ustawieniu zawartość elementu iframe jest traktowana jako pochodząca z unikalnego źródła, a funkcje, w tym skrypty, wtyczki, formularze i wyskakujące okienka, będą wyłączone. Ograniczenia można selektywnie złagodzić, dodając listę wartości oddzieloną spacjami. Możliwe wartości znajdują się w tabeli w uwagach. |
allowfullscreen | Czy zezwolić, aby zawartość elementu iframe korzystała z funkcji requestFullscreen() |
Uwagi
Element iframe służy do osadzania innego dokumentu w bieżącym dokumencie HTML.
Możesz używać ramek iframe do wyświetlania:
- inne strony HTML w tej samej domenie;
- inne strony HTML w innej domenie (patrz poniżej - zasady tego samego pochodzenia);
- Dokumenty PDF (chociaż IE może mieć pewne problemy, to pytanie SO może pomóc);
POWINIENEś używać iframe jako ostateczności, ponieważ ma on problemy z dodawaniem zakładek i nawigacją, a zawsze są lepsze opcje inne niż iframe. To pytanie SO powinno pomóc ci lepiej zrozumieć wzloty i upadki elementów iframe.
Polityka tego samego pochodzenia
Niektóre witryny nie mogą być wyświetlane przy użyciu elementu iframe, ponieważ egzekwują zasady zwane zasadami tego samego pochodzenia . Oznacza to, że witryna, na której znajduje się element iframe, musi należeć do tej samej domeny, co wyświetlana.
Ta zasada dotyczy również manipulowania treściami zawartymi w ramce iFrame. Jeśli element iFrame uzyskuje dostęp do treści z innej domeny, nie będzie można uzyskać dostępu ani modyfikować treści wewnątrz ramki iFrame.
Element iframe w W3C
atrybut sandbox
Po ustawieniu atrybut sandbox dodaje dodatkowe ograniczenia do iframe. Listę tokenów oddzieloną spacjami można zastosować w celu złagodzenia tych ograniczeń.
| Wartość | Detale |
|---|---|
allow-forms | Pozwala na przesyłanie formularzy. |
allow-pointer-lock | Włącza interfejs API wskaźnika JavaScript. |
allow-popups | Wyskakujące okienka można tworzyć za pomocą window.open lub <a target="_blank" |
allow-same-origin | Dokument iframe wykorzystuje swoje prawdziwe pochodzenie, a nie niepowtarzalny. Jeśli zostanie użyty ze allow-scripts dokument iframe może usunąć wszystkie piaskownice, jeśli pochodzi z tego samego źródła co dokument nadrzędny. |
allow-scripts | Włącza skrypty. Dokument iframe i dokument nadrzędny mogą komunikować się ze sobą za pomocą interfejsu API postMessage() . W przypadku użycia z allow-same-origin dokument iframe może usunąć wszystkie obszary izolowane, jeśli pochodzi z tego samego źródła co dokument nadrzędny. |
allow-top-navigation | Pozwala zawartości iframe na zmianę położenia dokumentu najwyższego poziomu. |
Podstawy wbudowanej ramki
Termin „IFrame” oznacza wbudowaną ramkę. Można go użyć do włączenia innej strony na twoją stronę. base.html małą ramkę, która pokazuje dokładną zawartość base.html .
<iframe src="base.html"></iframe>
Ustawianie rozmiaru ramki
Rozmiar IFrame można zmienić za pomocą atrybutów width i height , gdzie wartości są reprezentowane w pikselach (HTML 4.01 dopuszcza wartości procentowe, ale HTML 5 dopuszcza tylko wartości w pikselach CSS).
<iframe src="base.html" width="800" height="600"></iframe>
Korzystanie z kotwic z ramkami IFrame
Zwykle zmiana strony internetowej w ramce iframe jest inicjowana za pomocą ramki iframe, na przykład poprzez kliknięcie łącza w ramce ifame. Istnieje jednak możliwość zmiany zawartości IFrame spoza IFrame. Możesz użyć tagu kotwicy, którego atrybut href jest ustawiony na pożądany adres URL, a atrybut target jest ustawiony na atrybut name iframe.
<iframe src="webpage.html" name="myIframe"></iframe>
<a href="different_webpage.html" target="myIframe">Change the Iframe content to different_webpage.html</a>
Korzystanie z atrybutu „srcdoc”
srcdoc można użyć (zamiast atrybutu src ) do określenia dokładnej zawartości elementu iframe jako całego dokumentu HTML. To da IFrame z tekstem „IFrame są fajne!”
<iframe srcdoc="<p>IFrames are cool!</p>"></iframe>
Jeśli srcdoc atrybut nie jest obsługiwany przez przeglądarkę, iframe będzie zamiast cofać się do korzystania z src atrybut, ale jeśli zarówno src i srcdoc atrybuty są obecne i obsługiwane przez przeglądarkę, srcdoc ma pierwszeństwo.
<iframe srcdoc="<p>Iframes are cool!</p>" src="base.html"></iframe>
W powyższym przykładzie, jeśli przeglądarka nie obsługuje atrybutu srcdoc , zamiast tego wyświetli zawartość strony base.html .
Piaskownica
Poniżej zamieszczono niezaufaną stronę internetową z włączonymi wszystkimi ograniczeniami
<iframe sandbox src="http://example.com/"></iframe>
Aby umożliwić stronie uruchamianie skryptów i przesyłanie formularzy, dodaj allow-scripts allow-forms i allow-forms do sandbox attribute .
<iframe sandbox="allow-scripts allow-forms" src="http://example.com/"></iframe>
Jeśli w tej samej domenie co nadrzędna strona internetowa znajduje się niezaufana treść (taka jak komentarze użytkowników), można użyć ramki iframe, aby wyłączyć skrypty, jednocześnie umożliwiając dokumentowi nadrzędnemu interakcję z jego zawartością za pomocą JavaScript.
<iframe sandbox="allow-same-origin allow-top-navigation" src="http://example.com/untrusted/comments/page2">
Dokument nadrzędny może dodawać detektory zdarzeń i zmieniać rozmiar ramki IFrame w celu dopasowania do jej zawartości. To, wraz z allow-top-navigation , może sprawić, że element iframe w piaskownicy będzie wydawał się częścią dokumentu nadrzędnego.
Ten obszar izolowany nie zastępuje środków dezynfekujących, ale może być używany jako element strategii głębokiej obrony .
Pamiętaj również, że atakujący może przekonać piaskownicę, aby przekonał użytkownika do odwiedzenia źródła iframe bezpośrednio. Aby zminimalizować ten atak, można użyć nagłówka HTTP Content Security Policy .