What are Iframes?

what-are-iframes What are Iframes?

An iframe or inline frame is essentially a browser window set within the web page. These frames are sections of the web page that can be ‘cut out’ to allow information from an external source. Iframes are one of the only type of frames that HTML5 allows and are usually present on websites that show external content as a feed within their web pages.

Defining iframes

An iframe or an inline frame is an HTML document on a website that is embedded within another HTML document. It is used to add or include content such as advertisements, interactive applications or content from other external sources into the web page. The interactive applications include those that use Asynchronous Javascript and XML such as e-commerce applications and Google maps.

It is possible to configure the iframe on its own scroll bar, independent to the background page scroll bar and it behaves like an inline image. The web designer can alter the content of the iframe without the user having to reload the surrounding page. This is possible through Javascript or the HTML anchor’s target attribute.

What do Iframes do?

Iframes essentially allow for external content to be included within a web page. External content would consist of advertisements from advertising networks or any promotional material which is not editorial content. Using an iframe for this information is similar to having two browser windows open on the same page, where the main window shows the webpage content, and the secondary window displays the external content. The benefit here is that the actual content on the website does not get diluted because search engines do not consider these advertisements as primary content.

How to use the Iframe element?

A simple iframe can be built by setting the source URL, width and height.
For example: <iframe src=”URL” width=”200px” height=”200px”>Alternate text if the iframe cannot be rendered </iframe>.

It is also possible to use percentage instead of pixel values for the settings of the Iframe. This is useful while building a responsive website where the size changes with different screen sizes. The iframe uses HTML5 and HTML 4.01 global elements apart from others. They are as follows:

  • URL which is the source of the frame.
  • Name, height and width of the window.
  • ‘srcdoc’ takes priority over any URL. It is the HTML for the source of the frame.
  • Sandbox is the features that should be defined as allowed or not in the frame window.
  • Seamless is an attribute which communicates that the iframe should flow as an integral part of the parent document or URL.

While most websites today are built using HTML5+, some attributes are valid in HTML 4.01 which are part of legacy documents, including:

  • Usage of an ‘A’ element to link a description
  • Usage of border CSS property
  • Usage of CSS float property
  • Usage of CSS background property to allow transparency of the iframe.
  • Usage of CSS margin property for margin width and height (margin height and margin width)
  • Usage of CSS overflow property

Browser support for iframes

The iframe element is supported by all the modern web browsers. In the list of browsers mentioned below, those listed without version numbers implies that all versions of the browser support it.

web-browsers-300x209 What are Iframes?
  • Chrome
  • Android
  • Internet Explorer 2+
  • iOS, Safari, Safari Mobile
  • Netscape 7+
  • Opera 3+

While all browsers support iframe, there is limited support for some HTML5 features, and none of the browsers support srcdoc, sandbox, and seamless attributes. If scroll bars are not needed on the Iframes, scrolling attribute can continue. The use of ‘overflow’ is not reliable to stop scrolling.

Linking and iframes

Iframes when given an ID or name, allow you to direct links within the frame using the attribute on the ‘A’ element. When a user clicks, rather than opening in a current window, the link opens within a referenced iframe. If there are no targets provided on the document opened in the iframe, all the links open in the parent document’s iframe. This characteristic helps alter the content in another iframe using the links of one iframe present on the same webpage.

Advantages of using iframes:

  • It allows for third party media to be present on the web page
  • It is a powerful way of strengthening the website with rich content that visitors like
  • It allows inclusion of your media
  • The presence of iframes do not affect the quality of content on the webpage neither does it affect the ranking in search engines.
  • If you have content that you do not want search engines to crawl, an iframe is an effective way to exclude the content from being crawled and indexed.
  • Third party applets such as payment forms can be incorporated
  • Code examples can be embedded

Disadvantages of using Iframes

  • It can be misused easily leading to security issues
  • It is mainly useful to embed existing HTML document into a current page.
  • Iframes are not useful for photo galleries, forums and if you need to build from scratch and interfere a lot into breaking the page design into several independent documents.
  • Malicious iframe code can be used to attack prominent websites. Iframe code is inserted into saved search results of websites and when a link from the tampered search tool is clicked on, the user gets redirected to detrimental content by the Iframe code. This makes the user’s computer susceptible to a malware download.
  • Some computer viruses can also introduce invisible iframes into your webpages and convert it into a ‘botnet’ through SQL and other attacks.

Are there Security Concerns with Iframes?

By themselves, iframes do not pose a risk to you or your website users/readers, and neither is it risky to link your pages in iframes. However, malicious websites often use iframes to infiltrate unfavorable content that can infect a visitor’s computer without visibility or their knowledge. While adding iframes in your site, you need to be careful of the content of all the sites you link to. If you have reason to believe that sites are not reliable or trustworthy, avoid linking them or their contents in an iframe.

Iframes are simple, flexible and can make your website interactive and user-friendly. There is an element of risk if the iframe contains unreliable content, but ensuring that trustworthy information is linked in the iframe can help avoid such issues.

fb50c5bf790872a8ecad33a6bd15d358?s=100&d=mm&r=g What are Iframes?

CEO, Flying Cow Design
Attended University of Auckland
Lives in San Francisco Bay Area

June 14th, 2017

Need help with Web Design?

Write to us with your project details and we will get back to you shortly.

Related Articles
Self-hosted WordPress sites are versatile platforms for building a business. The secret to WordPress' flexibility
If you are a business owner looking to grow your business online, here are three
A payment gateway facilitates online credit card payment processing on your website. The software and
Content marketing creates organic traffic, but it requires sound strategy. Separating the two is like
When we look back over the last 10 years, it is amazing how corporate websites
When one mentions browsers, most instinctively think of Internet Explorer, Mozilla Firefox and Google Chrome.
Not often are CSS and typography used in the same sentence and in many ways,
It's rare to find a website to be completely free of errors. This is usually
What are web fonts? When designing for offline media like brochures, billboards, press advertisements, etc.,
Everyone has their own idea about what a good website design is. Since design and