iframe ... ⁄iframe, display in browser
Browser display, iframe element
- empty iframe element (start tag, end tag only): displays an empty rectangle in browser
- its content, through src attribute:
- displays in browser inside the rectangle;
- the type of display depends strictly on the framed elements;
- if the size of the content exceeds the default size of the iframe, and if the width ⁄height attributes are absent or their values are inferiors to those set by default, a vertical scrollbar displays - its content, through srcdoc attribute:
- displays in browser inside the rectangle only if the quotes and the ampersands, if present, have been escaped;
- the type of display (inline, block, inline-block) depends strictly on the framed elements; inside the iframe some elements may display block, others inline, others inline-block.. - if seamless attribute is present: the rectangle no longer displays in browser, only its content, making it appear like part of the present document and not like an iframe; the content displays block
Display type:
inline-block by default
or
block if seamless attribute present
Video demonstration iframe element, view in browser
HTML5 iframe, browser display, Tutorial
| min | video details |
|---|---|
| 00:05 | video tutorial: testing the browser display of the iframe element in browser Google Chrome |
| 00:14 | empty iframe element (start tag, end tag, only) displays an empty rectangle in browser |
| 00:25 | the content of the iframe (given through src attribute): displays in browser inside the rectangle where the display of each element depends strictly on that element |
| 00:29 | an image inside the paragraph: the paragraph displays block and the image displays inline with the paragraph |
| 00:42 | by adding another paragraph inside the framed document (index2.php), the default size of the iframe has been exceeded → a vertical scrollbar displays this 2nd paragraph also displays block inside the iframe, just like the 1st one note: to remove the vertical scrollbar, add the height attribute with a bigger value than the value of the iframe |
| 01:03 | the first iframe: displays inline-block |
| 01:07 | the second iframe, seamless attribute present: displays block without border |
| 01:21 | the content of the iframe (given through srcdoc attribute): displays in browser inside the rectangle where the display of each element depends strictly on that element note: the content displays only if the quotes and ampersands, if any, are escaped |