Th e HTML5 iframe element has several attributes; some of which are new to HTML5. However, to get started, all you need to know is the basic tag and how it’s implemented. Th e following is the bare bones <iframe> tag with a Web page embedded:
<iframe src=”http://www.w3.org”></iframe>
Th at tag simply places the source Web page in the upper-left corner of the calling page. To better see the options and control over the iframe, the following program (iframeWeb. html in this chapter’s folder at www.wiley.com/go/smashinghtml5) embeds two diff erent Web pages inside itself and add several attributes that you can see.
<!DOCTYPE HTML> <html>
<head>
<style type=”text/css”>
/*657BA6,F2EDA2,F2EFBD,F2DCC2,D99379*/
body {
background-color:#F2EDA2;
}
h1 {
font-family:Verdana, Geneva, sans-serif;
color:#657BA6;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> <title>Iframe Web</title>
</head> <body> <!DOCTYPE HTML> <html> <body> <article> <header> <h1>Before iframes</h1> </header> <section>
<iframe name=”info” width=”480”, height=”320” sandbox=”allow-same-origin”
145
<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. Th e iframe element itself has seven attributes plus HTML5 global attributes. Th e element attributes are
src srcdoc name sandbox seamless width height
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 fi le with information specifi c for the iframe. Th 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. Th 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. Th 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.
Th e h1 headings before and aft 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 aft 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
146
deal breaker for iframes in mobile devices; however, in Chapter 8, you’ll see how iframes can be used as single-page Web sites optimized for mobile browsers.
Figure 7-8: Embedding Web pages inside a Web page.
TAKE THE WHEEL
Setting up a Web site of your own can be a lot of fun, and one of the tasks is to get all the links working in concert. In the next chapter, you’ll learn about navigation strategies, but for now you need some practice in getting a set of links and icons ready. Here’s your challenge:
1. Create three Web pages. Include several sections with headings and subheadings so that each will go beyond a vertical screen viewing area. (In other words, the viewer would have to scroll down in order to see the bottom sections.)
2. On each of the Web pages, set up a link to an icon (see “Link icons” in this chapter). It’s up to you whether you want each page to have a page icon (all diff erent) or a site icon (all the same).
3. Create two diff erent CSS3 style sheets (external) and provide alternate styles and access to them on all the pages (see “Alternate style sheets” in this chapter).
4. Create a third style sheet that has nothing but IDs that will be used as anchors. Place an ID in each section of your pages.
5. Finally, create links on each of the three pages that will link to the other two pages and all the IDs on each page.
Make this exercise fun for yourself. You can create pages to do anything you want. Th ere’s no reason to be serious (unless you have a client in mind!). So, don’t worry about the content, but make it exactly what you’d like.