iframe srcdoc attribute
The srcdoc attribute on the iframe element:
- lets you directly add the whole content of an HTML document
- this content, HTML5 valid, will represent the content of the iframe
- notes: the doctype, title, meta elements are optional in this case and please remember that the start tags of the next elements can be omitted: html, head, body
- srcdoc is a specific attribute → can be applied ONLY on the next HTML5 element: iframe
Note: if both src and srcdoc are present on iframe element, srcdoc ensures the content of the iframe while src provides the fallback content
Warning:
Examples
| <iframe | attribute | = | "value(s)" | > | ... | <⁄iframe> | Examples |
|---|---|---|---|---|---|---|---|
| 7. | srcdoc | = | HTML elements | < srcdoc="<!doctype html>..."> ... <⁄> |
Video demonstration iframe srcdoc attribute
HTML5 iframe srcdoc: escaping quotes and ampersands
| min | video details |
|---|---|
| 00:00 | video tutorial: srcdoc attribute on iframe element |
| 00:12 | currently we have an empty iframe on page |
| 00:16 | we will load the index2.php file inside the iframe contained by the index.php file through srcdoc attribute |
| 00:35 | the srcdoc attribute on iframe element lets you directly add the whole content of an HTML document, this content HTML5 valid, represents the content of the iframe |
| 00:54 | the content of the iframe does not display, because the quotes and the ampersands must be escaped, let's do this |
| 01:28 | quotes must be escaped and the ampersands must be doubly escaped, both in url (url as value of an attribute) and in prose (prose= the content of an element) |