iframe src vs iframe srcdoc
src attribute versus srcdoc attribute
<iframe src> | <iframe srcdoc> |
---|---|
1. Utility: | |
gives the content of the iframe | gives the content of the iframe |
2. Value: | |
a URL | a whole HTML document, where: doctype, title, meta are optional elements and the start tag of the next elements can be omitted: html, head, body |
3. Observations: | |
the URL must be valid | the syntax of the HTML document must be valid; the quotes must be escaped and the ampersand must be doubly escaped both in prose as in URLs (as attribute values) |
4. When both used: | |
src's role is to provide the fallback content (alternative content that will be loaded inside the iframe in case the srcdoc attribute is not supported) | srcdoc ensures the content of the iframe |
Video demonstration iframe: src versus srcdoc attribute
HTML5 iframe: src versus srcdoc Tutorial
min | video details |
---|---|
00:05 | video tutorial: the difference between src and srcdoc attributes |
00:09 | src attribute |
00:10 | src holds the url of the document to embed in page through iframe element |
00:16 | srcdoc attribute |
00:16 | srcdoc attribute holds the content of the document to embed in page through iframe element |
00:25 | in this case: doctype, meta, title elements are optional and the start ⁄end tag of the html, head and body elements can be omitted |
00:36 | the URL must be valid |
00:39 | the content of the document must be HTML5 valid |
00:42 | the quotes must be escaped; the ampersands must be doubly escaped |
01:04 | both src and srcdoc attributes give the content of the iframe |
01:06 | when both attributes(src and srcdoc) are added on iframe element, srcdoc provides the content of the iframe while src provides the fallback content (when srcdoc is not supported in browser) |
01:36 | both attributes are supported in Google Chrome → srcdoc gives the content of the iframe |
01:44 | src gives the content of the iframe when srcdoc is not supported in browser e.g. currently Firefox does not support the srcdoc attribute |