ALL ABOUT LINKS - HTML5 - page 141

< iframe name = ”info2” width = ”480” , height = ”320” sandbox seamless src = ”http://www.
w3.org” ></ iframe >
</ section >
< footer >
< h1 > After iframes </ h1 >
</ footer >
</ article >
</ body >
</ html >

</ body >
</ html >

In the two <iframe> tags, you can see several attributes, some of which you've seen in other
elements. h e iframe element itself has seven attributes plus HTML5 global attributes. h e
element attributes are

src
srcdoc
name
sandbox
seamless
width
height

145

Of these seven, srcdoc , sandbox , and seamless are new. At the time of this writing the
srcdoc has not been implemented in any of the tested browsers, but when it is, it navigates
to a text/HTML i le with information specii c for the iframe. h e sandbox attribute, available
in the Google Chrome browser, is used for restricting the types of content and functionality
that can be provided in an iframe, for security reasons. h e seamless attribute has not been
implemented either, but when it is, all links will be opened in the parent browsing context
instead of the nested browsing context — inside the iframe. Older browsers and HTML5
browsers that have not yet implemented them ignore all these new iframe attributes.
h erefore, you can add the attributes to <iframe> tags to set up good habits so that when
they're available, they can help add security to your Web pages. Figure 7-8 shows how the
embedded pages appear on a computer screen.

h e h1 headings before and at er the embedded pages show that the embedded pages are not
subject to the CSS3 style of the parent page. Also, you can see that each page is inside another
page — before and at er the insertion of the two other Web pages.

If you look at the code, you'll see that their dimensions (320 x 480) suggest the viewing
resolution for a mobile device. However, when tested on a mobile device, the iframe opened
up to display the entire embedded pages. No scroll bars appear in the mobile browsers, so the
only alternative to show the entire contents of the embedded pages is to allow them to be
thumb-scrolled horizontally and vertically within the iframe. Initially, this may seem to be a