IFrames

Download html eBook

Parameters

AttributeDetails
nameSets the element's name, to be used with an a tag to change the iframe's src.
widthSets the element's width in pixels.
heightSets the element's height in pixels.
srcSpecifies the page that will be displayed in the frame.
srcdocSpecifies the content that will be displayed in the frame, assuming the browser supports it. The content must be valid HTML.
sandboxWhen 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.
allowfullscreenWhether 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.

ValueDetails
allow-formsAllows forms to be submitted.
allow-pointer-lockEnables the JavaScript pointer API.
allow-popupsPopups can be created using window.open or <a target="_blank"
allow-same-originThe 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-scriptsEnables 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-navigationAllows the iframe's content to change the location of the top level document.

Related Examples

Stats

370 Contributors: 10
Wednesday, February 15, 2017
Licensed under: CC-BY-SA

Not affiliated with Stack Overflow
Rip Tutorial: info@zzzprojects.com

Download eBook