Attribute | Details |
——— | —–– |
name | Sets the element’s name, to be used with an
a tag to change the iframe’s
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
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.
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, 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-popups | Popups can be created using
<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. |