IFrames

Parameters

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.

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.