HTML IFrames
Parameters
| Attribute | Details |
|---|---|
name | Sets the element's name, to be used with an a tag to change the iframe's src. |
width | Sets the element's width in pixels. |
height | Sets the element's height in pixels. |
src | Specifies the page that will be displayed in the frame. |
srcdoc | Specifies the content that will be displayed in the frame, assuming the browser supports it. The content must be valid HTML. |
sandbox | When set, the contents of the iframe is treated as being from a unique origin and features including scripts, plugins, forms and popups will be disabled. Restrictions can be selectively relaxed by adding a space separated list of values. See the table in Remarks for possible values. |
allowfullscreen | Whether to allow the iframe’s contents to use requestFullscreen() |
Remarks
An iframe is used to embed another document in the current HTML document.
You CAN use iframes for displaying:
- other HTML pages on the same domain;
- other HTML pages on another domain (see below - Same-origin policy);
- PDF documents (though IE might have some problems, This SO question might help);
You SHOULD use an iframe as a last resort, as it has problems with bookmarking and navigation, and there are always better options other than an iframe. This SO question should help you understand more about the ups and downs of iframes.
Same-origin policy
Some sites cannot be displayed using an iframe, because they enforce a policy called Same-origin policy. This means that the site that the iframe lies on must be on the same domain as the one to be displayed.
This policy also applies to manipulating content that lives inside of an iFrame. If the iFrame is accessing content from a different domain, you will not be able to access or manipulate the content inside of an iFrame.
The iframe element on W3C
sandbox attribute
The sandbox attribute, when set, adds extra restrictions to the iframe. A space separated list of tokens can be used to relax these restrictions.
| Value | Details |
|---|---|
allow-forms | Allows forms to be submitted. |
allow-pointer-lock | Enables the JavaScript pointer API. |
allow-popups | Popups can be created using window.open or <a target="_blank" |
allow-same-origin | The iframe document uses its real origin instead of being given a unique one. If used with allow-scripts the iframe document can remove all sandboxing if it's from the same origin as the parent document. |
allow-scripts | Enables scripts. The iframe document and parent document may be able to communicate with each other using the postMessage() API. If used with allow-same-origin the iframe document can remove all sandboxing if it's from the same origin as the parent document. |
allow-top-navigation | Allows the iframe's content to change the location of the top level document. |
