The HTML <iframe> tag represents a nested browsing context in an HTML document.
The <iframe> tag allows you to embed another document within the current HTML document. It also allows you to provide a nested browsing context without using another document - by simply passing the content to the <iframe> via thesrcdoc attribute.
Prior to HTML5, the <iframe> tag was said to create an inline frame. The HTML5 specification does not use the term inline frame, but uses nested browsing context instead.
Syntax
The <iframe> tag is written as <iframe></iframe> with the applicable attributes inserted into the start tag.
Like this:
<iframe src=""> </iframe>
Or using the srcdoc attribute:
<iframe srcdoc=""> </iframe>
Using the src, width, height, and seamlessattributes:
<iframe src="" width="" height="" seamless> </iframe>
Examples
Basic tag usage
The following example uses the src attribute to specify an external document that the nested browsing context is to contain. In this example, we don't use the width or height attribute.
Refresh Result
1
<iframe src="/html/tags/html_iframe_tag_example.cfm"></iframe>
The width and heightAttributes
Here, we add the width and height attributes to the previous example.
Refresh Result
1
<iframe src="/html/tags/html_iframe_tag_example.cfm" width="150" height="150"></iframe>
The seamless Attribute
The WHATWG HTML Living Standard and HTML 5.1 introduced the seamless attribute. The seamlessattribute specifies that the element's browsing context is to be rendered in a manner that makes it appear to be part of the containing document (seamlessly included in the parent document). This results in the document's styles being applied to the nested content. It also results in any links being opened in the <iframe> element's parent browsing context.
Note that at the time of writing, browser support for the seamless attribute is poor.
Refresh Result
1
<iframe src="/html/tags/html_iframe_tag_example.cfm" width="150" height="150" seamless></iframe>
The srcdoc Attribute
You can use the srcdoc attribute to specify the content that should appear in the nested browsing context.
Note that <!doctype> and <title> are optional when using the srcdoc attribute within a<iframe> tag (they are required on most other HTML documents).
Refresh Result
1
<iframe srcdoc="
2
<html>
3
<head>
4
</head>
5
<body>
6
<p>Nested browsing context using the <code>srcdoc</code> attribute.</p>
7
</body>
8
</html>
9
"
10
width="150" height="150" seamless></iframe>
Differences Between HTML 4 & HTML 5
HTML5 introduced the following attributes:
srcdocsandbox
Both HTML 5.1 and the HTML Living Standard have introduced the following attributes:
seamlessallowfullscreen
HTML5 does not support the following attributes (which were supported in HTML 4 and earlier):
alignlongdescframeborderscrollingmarginwidthmarginheight
Also, in HTML 4 and previous versions you could create "fallback content" by placing content within the opening and closing <iframe> </iframe>tags. In HTML5 however, the <iframe> element never has fallback content.
To see more detail on the HTML 4 and HTML5 versions see HTML5 <iframe> Tag and HTML4<iframe> Tag. Also check out the links to the official specifications below.
Template
Here's a template for the <iframe> tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don't need.
For more information on attributes for this tag, seeHTML5 <iframe> Tag and HTML4 <iframe> Tag.
<iframe src="" srcdoc="" name="" sandbox="" width="" height="" accesskey="" class="" contenteditable="" contextmenu="" dir="" draggable="" dropzone="" hidden="" id="" itemid="" itemprop="" itemref="" itemscope="" itemtype="" lang="" spellcheck="" style="" tabindex="" title="" translate="" onabort="" onautocomplete="" onautocompleteerror="" onblur="" oncancel="" oncanplay="" oncanplaythrough="" onchange="" onclick="" onclose="" oncontextmenu="" oncuechange="" ondblclick="" ondrag="" ondragend="" ondragenter="" ondragexit="" ondragleave="" ondragover="" ondragstart="" ondrop="" ondurationchange="" onemptied="" onended="" onerror="" onfocus="" oninput="" oninvalid="" onkeydown="" onkeypress="" onkeyup="" onload="" onloadeddata="" onloadedmetadata="" onloadstart="" onmousedown="" onmouseenter="" onmouseleave="" onmousemove="" onmouseout="" onmouseover="" onmouseup="" onmousewheel="" onpause="" onplay="" onplaying="" onprogress="" onratechange="" onreset="" onresize="" onscroll="" onseeked="" onseeking="" onselect="" onshow="" onsort="" onstalled="" onsubmit="" onsuspend="" ontimeupdate="" ontoggle="" onvolumechange="" onwaiting="" > </iframe>
0 comments:
Post a Comment