iframe, for dynamic or sandboxed content

This tag was already part of the specification HTML 4 but is more developed in HTML 5 while frames, and hence the frameset tag, have now obsolete.

Iframe means "inline frame", it fits into the flow of page content.

Iframe was used to create dynamic content before the advent of Ajax: by assigning a content with JavaScript, you could easily change the page after loading.
But Ajax provides a more complete interaction with the server.

Iframe has other uses. For the webmaster, is a way to present content to visitors which will not be visible to search engines. If for example you want to display the same text in all pages without triggering duplicate content signals to the robots that are becoming increasingly paranoid about it, you must place it into an iframe.

Regardless of the search engines, iframes allow to insert content more easily than Ajax that requires XMLHttpRequest functions. Simply assign the src attribute in the original code, or further with JavaScript.

Ajax is still essential if you want to include an HTML page created on the server based on parameters provided by the user. You can still include this page generated on demand in an iframe.

Using iframe

We define an iframe by assigning a URL to a page containing the content to include in the src attribute. Its size is defined by weight and height attributes or a style sheet. Example:

Source code:

<iframe src="iframe-demo.html" 
     width="320" 
     height="200" 
     style="border:2px solid orange">
</iframe> 

New attributes in HTML 5

Besides the generic attributes weight, height to set the dimensions, this tag also has original attributes.

With HTML 5 an iframe can be placed in a sandbox that is completely isolated from the rest of the page.
To this purpose, three new attributes were added (not necessarily compatible with any browser):

sandbox
To isolate the inserted content of the page, and possibly set permissions.
allow-same-origin indicates that the linked page is regarded as having the same origin as the page that displays it.
allow-top-navigation: allows scripts in the content to access to the DOM of the page that contains it.
allow-forms: allows submission to forms inserted into the content.
allow-scripts: You can run scripts in the content.
If no value is assigned to the sandox attribute, the protection is up and none of this will be accepted. The page will be secure.
seamless
When this attribute is added (it can be or removed dynamically), the content is treated as if it was part of the current page.
Thus, if it contains links and the user clicks on that link, the page will replace the current page. Otherwise it will replace the contents of the iframe.
srcdoc
Specifies a content to be placed directly in the iframe.

Some attributes were part of the HTML 4 specification: marginweight and marginheight to choose the thickness of the margin around the frame, frameborder, with a value 1 or 0 depending on whether you want a border or not, scrolling, yes or no , depending on whether you want scrollbars or not.

They are useless because they are layout properties that must instead be defined in the style sheet or in the attribute <style> and are therefore removed in HTML 5.

See also: Exchanging data between a page and iframes.

Reference: The iframe element for web authors.

© 2011-2015 Xul.fr