HTML and CSS Reference
In-Depth Information
HTML5 proposes two new attributes for the
iframe
element:
seamless
and
sandbox
.
The
seamless
attribute effectively renders the
iframe
as an inline include, which allows
the parent document's CSS to affect the contents of the
iframe
:
<iframe src="content.html" name="thisframe" width="200"
height="300" seamless">
[alternate content]
</iframe>
Here is the same example using XHTML style syntax:
<iframe src="content.htm" name="thisframe" width="200"
height="300" seamless="seamless">
[alternate content]
</iframe>
The
sandbox
attribute “sandboxes” the iframe, essentially preventing it from pulling in
content from any source other than the
iframe
itself. Used without attributes,
sandbox
has
the following effects on the
iframe
:
•
New windows cannot be created from within the
iframe
.
•
Plug-ins are prohibited;
embed
,
object
, and
applet
will not function in
a sandboxed
iframe
.
•
Nested inline frames are prohibited.
•
A completely sandboxed
iframe
is considered, in essence, a new subdomain on the
client side. Access to JavaScript is not allowed; cookies can't be read or written.
•
A completely sandboxed inline frame cannot submit forms or run scripts.
These prohibitions can be “turned off” using a number of attributes:
•
allow-same-origin
allows the
iframe
to pull in content from elsewhere in the
same domain.
•
allow-forms
permits the submission of forms in the sandboxed iframe.
•
allow-scripts
allows the sandboxed
iframe
to run scripts from the same domain.
These attributes can be used separately, or together as space-separated values. The order of
the attributes does not affect any functionality.
<iframe src="content.htm" sandbox="allow-same-origin
allow-forms allow-scripts">
<iframe src="content.htm" sandbox="allow-forms">
HTML5 drops presentational
iframe
attributes such as
frameborder
,
scrolling
,
marginwidth
, and
marginheight
. The attributes
name
,
height
,
width
, and the all-
important
src
remain part of the specification. HTML5 also adds global attributes to all
HTML5 tags, including
<iframe>
. See Chapter 3 for an in-depth discussion of these
attributes.
Under HTML5, the
<iframe>
tag can also be written XHTML style, with a closing slash:
<iframe src="content.htm" height="200" width="200"
sandbox="allow-same-origin" />