A document within a document
iframe
The iframe element places a document within a document.
Nesting documents in this way allows the inner document's content to be changed by it's creator autonomously.
The outer containing document "frames" the inner document without duplicating it or freezing it at a point in time.
Properties
- src
- Use sourceref notation to identify the remote URL containing the inner document.
- srcdoc
- A complete inner document, written in HTML, to be used instead of the remote URL specified by
`src`. - height
- The height of the iframe, in pixels, but specified without units.
- width
- The width of the iframe, in pixels, but specified without units.
- name
- A name that can be used in "a", "form" and "base" elements to target this iframe.
- allow
- A comma-separated list of features that are allowed or enabled for the inner document. See Feature Policy for details.
- referrerpolicy
- Which referer to send to the server when requesting the inner document. See Referrer Policy for details.
| Feature | Description |
|---|---|
| autoplay | Allows the autoplay attribute on videos within same-origin iframes |
| geolocation | Allows/disables the use of the Geolocation API |
| picture-in-picture | Allows the usage of Picture-in-Picture in cross-origin iframes |
| vertical-scroll | Controls whether embedded content can interfere with vertical scrolling |
| sync-xhr | Disallows the use of synchronous XMLHttpRequests |
| sync-script | Prevents synchronous scripts from executing |
| oversized-images | Ensures intrinsic size of images are not more than X times larger than their container size |
| unoptimized-lossy-images | Requires size of JPG file, in bytes, to be no more than X times bigger than its visible size (width * height) |
| unoptimized-lossless-images | Requires size of WEBP file, in bytes, to be no more than X times bigger than its visible size (width * height) |
| unoptimized-lossless-images-strict | Requires size of WEBP file, in bytes, to be no more than X times bigger than its visible size (width * height) |
| unsized-media | Sets a default size of 300x150 if dimensions aren't specified |
| Feature | Situation | Action |
|---|---|---|
| no-referrer | always | instructs the browser to omit the referer header completely. |
| no-referrer-when-downgrade | when switching from https: to http: | instruct the browser to omit the referer header completely. |
| same-origin | when going from one domain to a different domain | instructs the browser to omit the referer header completely. |
| origin | always | instructs the browser to send the requestor's origin only (protocol + hostname + port). |
| strict-origin | when switching from http: to https: | instructs the browser to limit the referer header to just the origin. |
| origin-when-cross-origin | when going from one domain to a different domain | instructs the browser to limit the referer header to just the origin. |
| strict-origin-when-cross-origin | when switching from https: to http: | instruct the browser to omit the referer header completely. |
| unsafe-url | always | instructs the browser to send the requestor's complete origin, resource path, and all query-string variables. |
Example
iframe *width=600 *height=450 *frameborder=0 *allowfullscreen `https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d155801.36978800895!2d130.44082010985957!3d30.357872042577938!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x353d23ac32be358fΠxe9dcba68a8f3ca68!2sJÅmon+Sugi!5e0!3m2!1sen!2sus!4v1564420414460!5m2!1sen!2sus`
iframe *width=400 *height=300 `https://twitter.com/ReadWriteTools`