Embedding Third Party Content
In some cases, it is necessary to embed third party content such as external HTML pages or multimedia
content into the current page. This can be accomplished using the <iframe> tag.
The <iframe> is used to specify an inline frame or inline window. Inline frames are
often used in online advertising. Inline frames serve as a window within the current page to display
other content such as a second HTML page. The second page contains the content that is embedded within
the current page. The <iframe> is also commonly used to embed Youtube videos.
The <iframe> tag is coded as follows:
<iframe></iframe>
Listing 9-12. <iframe> tag
Note that a closing </iframe> tag is required even though it encloses nothing.
You can additionally include any number of floating frames on a Web page.
The following table lists the attributes associated with the tag:
| Attribute |
Description |
|
src="URL"
|
URL to the external content
|
|
height="pixels"
|
A pixel value. Specifies the height of the iframe window.
|
|
name="iframe name"
|
name associated with the iframe. This value is used by links to target the iframe window.
|
sandbox = "sandbox" - Applies all restrictions
"allow-forms" - Re-enables form submission
"allow-pointer-lock" - Re-enables APIs
"allow-popups" - Re-enables popups
"allow-same-origin" - Allows the iframe content to be treated as being from the same origin
"allow-scripts" - Re-enables scripts
"allow-top-navigation" - Allows the iframe content to navigate its top-level browsing context
|
Enables an extra set of restrictions for the content in an <iframe>
|
|
width="pixels"
|
A pixel value. Specifies the width of the iframe window
|
Figure 9-12. <iframe> attributes.
The example below demonstrates how to embed a Youtube video using the iframe.
<iframe src="https://www.youtube.com/embed/dmiiIffSLVk" width="560" height="315">
Figure 9-13. Examples of embedding a YouTube video.
The src attribute identifies the page to load initially into the frame. The
name attribute assigns a name to the iframe as a target for links. You do not
necessarily need to target the frame with links. You may simply wish to display a single external
document inside the frame. In which case, you need only to specify a URL in the src attribute of
the unnamed frame.
Both the width and height attributes can be used to set the dimension of the iframe. These dimensions can
also be set using CSS.
HTML 5 includes the new sandbox attribute that can be used with the <iframe> tag.
The sandbox attribute is used to restrict content that can appear in the iframe window. The sandbox is
a useful security feature. When it is included with the <iframe> tag, it tells the the
browser to disallow features that might cause a security risk to the site and its users. When the
attribute is present, it will do as follows:
- treat the content as being from a unique origin
- block form submission
- block script execution
- disable APIs
- prevent links from targeting other browsing contexts
- prevent content from using plugins (through
<embed>, <object>, <applet>, or other)
- prevent the content to navigate its top-level browsing context
- block automatically triggered features (such as automatically playing a video or automatically focusing a form control)
The iframe can also be used to display a single document or it can be a target for multiple linked documents.
For example, click on the following links to display different pictures in the inline frame.
Figure 9-14. An interactive <iframe>
The HTML code used to create the iframe is shown below:
<iframe name="TheFrame"></iframe>
<div>
<a href="Artemis.gif" target="TheFrame">Artemis</a>
<a href="Colossus.gif" target="TheFrame">Colossus</a>
<a href="Gardens.gif" target="TheFrame">Gardens</a>
<a href="Halicarnassus.gif" target="TheFrame">Halicarnassus</a>
<a href="Lighthouse.gif" target="TheFrame">Lighthouse</a>
<a href="Pyramid.gif" target="TheFrame">Pyramid</a>
<a href="Zeus.gif" target="TheFrame"> Zeus</a>
</div>
Figure 9-15. Code for an interactive <iframe> object.