Definition: 
iFrame is short for Inline Frame, a floating frame that allows you to insert an html document into another. It was a technique widely used already in the first web pages, in which a frame with a menu and another one in which the landing pages were displayed were introduced, all within a single html.
The iFrame is a very useful tool when you need to insert externally hosted content, such as an embedded video, an image or minute-by-minute content in a digital newspaper, for example. One of the most common uses of an iFrame is the insertion of a map with Google Maps that usually appears in the ‘Share’ section of Google Maps.
iFrame Code
The code of an iFrame starts with the tag <iframe>inside which you specify the URL of the content you want to display. A basic example of an iFrame would be:
<iframe src="https://www.ejemplo.com" width="600" height="400"></iframe>Attributes of an iFrame
The iFrames support several attributes that allow you to customize their appearance and functionality:
- src: Defines the URL of the HTML document to be displayed inside the iFrame.
- height: Sets the height of the iFrame in pixels or percentages.
- width: Sets the width of the iFrame in pixels or percentages.
- name: Assigns a name to the iFrame, useful for referencing it from scripts or links.
- longdesc: Provides a URL to a detailed description of the iFrame content, useful for accessibility.
- scrolling: Defines whether the iFrame should show scrollbars; can be “yes”, “no”, or “auto”.
- frameborder: Specifies whether the iFrame border should be shown (0 to hide, 1 to show).
- allowfullscreen: Allows the iFrame content to expand to full screen.
Advantages and disadvantages of iFrames
Advantages:
- Flexibility: It allows integrating content from different sources without the need to integrate it directly into the main source code.
- Isolation: iFrame content is isolated from the main document, which can improve security and stability.
- Reuse: Facilitates reuse of shared content across multiple web pages.
Disadvantages:
- Complicated measurement: iFrames can complicate the tracking of web metrics, as additional tracking pixels need to be implemented within the iFrame, which can lead to duplication or loss of data.
- Limited SEO: Content within an iFrame is not easily indexed by search engines, which can affect the search engine optimization(SEO) of the page.
- Compatibility: Some browsers or security settings may block iFrames, especially if the content is from a different domain.
iFrames in modern web design
While iFrames have been a useful tool in web development, their use has declined over time due to the aforementioned limitations. In modern web design, methods such as AJAX and APIs are preferred for integrating dynamic content, as they offer greater control and flexibility. However, iFrames are still useful in situations where external content needs to be integrated in a quick and easy way.