Osadzenie kodu HTML w ramce lokalnej <iframe srcdoc>
Jak bez użycia JavaScript wygenerować zawartość ramki lokalnej bez wczytywania do niej żadnej strony?
- Z użyciem apostrofu (przydatne kiedy wartość zawiera cudzysłowy):
<iframe srcdoc='kod'></iframe>
- Z użyciem cudzysłowu (przydatne kiedy wartość zawiera apostrofy):
<iframe srcdoc="kod"></iframe>
- kod
- Dowolny tekst ze znacznikami HTML. Może on składać się z wielu linijek.
Dzięki atrybutowi srcdoc='...' do ramki lokalnej nie musimy wczytywać osobnego pliku HTML za pomocą atrybutu src="...", ale możemy wprost podać kod HTML, który się w niej wyświetli.
Pamiętaj, że wartość atrybutu srcdoc='...' (oraz w formie srcdoc="...") musi mieć w odpowiedni sposób zakodowane znaki specjalne.
W tym celu na kodzie HTML, który chcesz wpisać w tym atrybucie, wykonaj po kolei następujące kroki:
- Zamień wszystkie znaki "&" na "&".
- Jeżeli wartość atrybutu
srcdoc='...'jest ujęta w znaki apostrofu, zamień wszystkie inne wystąpienia apostrofu na "'". - Jeżeli wartość atrybutu
srcdoc="..."jest ujęta w znaki cudzysłowu, zamień wszystkie inne wystąpienia cudzysłowu na """. - Opcjonalnie możesz zamienić znaki "<" na "<", natomiast ">" na ">". Nie jest to jednak wymagane.
srcdoc='...', możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj, zaznaczając w nim odpowiednie opcje ze znakami do zamiany.Przykład <iframe srcdoc>
Obie poniższe formy zapisu są równoważne (zwróć uwagę na znaki apostrofu i cudzysłowu):
<iframe srcdoc='<a href="index.html">Strona główna</a>'></iframe>
<iframe srcdoc="<a href="index.html">Strona główna</a>"></iframe>
Pytania i odpowiedzi <iframe srcdoc>
Co to jest srcdoc="..." w ramce IFRAME?
Atrybut srcdoc="..." w ramce <iframe> pozwala na bezpośrednie osadzenie kodu HTML wewnątrz ramki, zamiast ładowania zewnętrznego dokumentu przez atrybut src="...". Umożliwia to wyświetlanie statycznej zawartości bez konieczności tworzenia osobnego pliku HTML. Przykład: <iframe srcdoc="<p>Witaj, świecie!</p>"></iframe> wyświetli w ramce akapit z tekstem "Witaj, świecie!".
Czy srcdoc="..." jest bezpieczny?
Użycie srcdoc="..." jest bezpieczne, pod warunkiem że kontrolujesz zawartość osadzaną wewnątrz ramki. Ponieważ kod HTML jest bezpośrednio osadzany w dokumencie, nie ma ryzyka wstrzyknięcia nieautoryzowanego zewnętrznego kodu. Jednak należy uważać na potencjalne zagrożenia związane z możliwością uruchamiania niebezpiecznych skryptów, dlatego warto rozważyć zastosowanie atrybutu sandbox w celu ograniczenia dostępu do potencjalnie niebezpiecznych funkcji.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
iframe srcdoc | 20 2012-06-26 | 25 2013-10-29 | 79 2020-01-15 | 15 2013-07-02 | 6 2012-07-25 |