HTML Iframes

Iframes let you embed another HTML page within your webpage. They create a nested browsing context that acts like a separate window inside your page. This tutorial explains iframe basics, key attributes, and advanced features, and provides practical examples for using iframes in your projects.

Learning Outcomes

After completing this tutorial, you will be able to:

• Explain the purpose of an iframe and its role in embedding external content.
• Use the iframe syntax and correctly apply attributes like src, title, height, and width.
• Identify and use advanced iframe attributes such as name, srcdoc, allow, sandbox, loading, and referrerpolicy.
• Apply best practices for accessibility and security when using iframes.
• Create functional examples, including embedding third-party websites and targeting iframes with links.
• Troubleshoot common pitfalls related to layout shifts, cross-origin restrictions, and sandbox configurations.

What Is an Iframe in HTML?

An HTML iframe (inline frame) is a container that embeds an external HTML document. The iframe acts as a separate document that loads a different URL, holds its own scroll position, and maintains its session history. Although the iframe is independent, it is part of the parent document's DOM. Some interactions between the iframe and parent page are possible, subject to cross-origin restrictions.

Iframe Syntax

The basic structure for an iframe is:

<iframe src="URL" title="SitePoint"></iframe>

Example: Basic Iframe

<iframe src="https://www.sitepoint.com/" title="SitePoint"></iframe>

This snippet embeds the SitePoint webpage. Always include a descriptive title for accessibility.

Key Attributes of <iframe>

Below are key attributes with their short descriptions:

Attribute	Description
src	Sets the URL of the page to embed. If omitted or set to about:blank, an empty document is loaded.
title	Provides a description of the iframe content. Essential for accessibility.
height	Sets the vertical size of the iframe in CSS pixels.
width	Sets the horizontal size of the iframe in CSS pixels.
name	Gives the iframe a name so that links and forms can target it.
srcdoc	Provides inline HTML that is rendered directly in the iframe.
allow	Specifies which features (e.g., camera, microphone, fullscreen) are permitted in the iframe.
sandbox	Applies extra restrictions such as disabling scripts and form submissions unless tokens are enabled.
loading	Indicates if the iframe should load immediately (eager) or when near the viewport (lazy).
referrerpolicy	Controls which referrer information is sent when the iframe loads.

Height and Width

Set fixed dimensions for an iframe to reserve space while content loads. This action minimizes layout shifts and ensures stable page structure.

Example: HTML Attributes

<iframe src="https://www.sitepoint.com/" title="SitePoint" height="200" width="300"></iframe>

Output:

Example: CSS Styling

<iframe src="https://www.sitepoint.com/" title="SitePoint" style="height:200px; width:300px;"></iframe>

Output:

Name

The name attribute targets an iframe from links or forms. This allows actions to load content into the iframe instead of the main window.

Example: Using the Name Attribute

<iframe src="https://www.sitepoint.com/" name="contentFrame" height="500" width="400" title="SitePoint"></iframe>

<!-- Link targeting the iframe -->
<a href="https://www.sitepoint.com/community/" target="contentFrame">Load Another Example</a>

Clicking the link loads new content into the iframe named "contentFrame."

Advanced Iframe Functionality

Beyond basics, iframes offer advanced features for control, security, and performance.

Allow and Permissions Policy

The allow attribute controls browser features within the iframe. You can enable fullscreen mode or access to devices such as the camera or microphone.

<iframe src="https://www.sitepoint.com/" title="SitePoint" allow="fullscreen; camera; microphone"></iframe>

This attribute helps reduce security risks by controlling feature access.

Allowfullscreen

Although the legacy attribute allowfullscreen was set directly, modern practice uses it with the allow attribute for clarity.

<iframe src="https://www.sitepoint.com/" title="SitePoint" allow="fullscreen"></iframe>

Sandbox Attribute

The sandbox attribute enhances security by applying restrictions. It can disable scripts, forms, and popups unless you allow specific actions.

Example: Basic Sandbox

<iframe src="https://www.sitepoint.com/" sandbox title="SitePoint"></iframe>

Example: Custom Sandbox Tokens

<iframe src="https://www.sitepoint.com/" sandbox="allow-scripts allow-forms" title="SitePoint"></iframe>

Other Attributes: Loading and Referrer Policy

• Loading: Defer loading offscreen iframes using:

  <iframe src="https://www.sitepoint.com/" title="SitePoint" loading="lazy"></iframe>
  

• Referrer Policy: Enhance privacy by controlling referrer information:

  <iframe src="https://www.sitepoint.com/" title="SitePoint" referrerpolicy="no-referrer"></iframe>
  

Practical Examples and Use Cases

Embedding a Third-Party Website

Embed an external website into your page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Third-Party Website in Iframe</title>
</head>
<body>
  <h1>Embedding an External Website</h1>
  <iframe src="https://www.example.com" title="Embedded Example Website" height="400" width="600" style="border: 1px solid #ccc;"></iframe>
</body>
</html>

Targeting with Links

Use the name attribute to update the iframe content from a hyperlink. The example below demonstrates how to load different pages from SitePoint into the same iframe.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Iframe Targeting with Links</title>
</head>
<body>
  <iframe src="https://www.sitepoint.com/" name="targetFrame" title="Targetable Iframe" height="400" width="600"></iframe>
  <p>
    <a href="https://www.sitepoint.com/" target="targetFrame">SitePoint Home</a> |
    <a href="https://www.sitepoint.com/community/" target="targetFrame">Community</a> |
    <a href="https://www.sitepoint.com/blog/" target="targetFrame">Blog</a>
  </p>
</body>
</html>

Using srcdoc for Inline HTML Content

The srcdoc attribute lets you embed HTML code directly within your iframe, eliminating the need for an external URL.

Using srcdoc for Inline HTML Content

Embed HTML code directly within the iframe. Below is an updated example that includes a link to the SitePoint Community page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Iframe with Inline HTML</title>
</head>
<body>
  <iframe srcdoc="<h2>Inline HTML Example</h2>
                  <p>This content is rendered from the srcdoc attribute.</p>
                  <p><a href='https://www.sitepoint.com/community/'>Visit SitePoint Community</a></p>"
          title="Inline HTML Iframe"
          height="200"
          width="400">
  </iframe>
</body>
</html>

Removing the Border

To display an iframe without a border, use CSS:

<iframe src="https://www.sitepoint.com/" title="SitePoint" height="300" width="500" style="border: none;"></iframe>

Or style the border to match your design:

<iframe src="https://www.sitepoint.com/" title="SitePoint" height="300" width="500" style="border: 2px solid #ff0000;"></iframe>

Common Pitfalls and Troubleshooting

Keep these tips in mind when working with iframes:

• Always set the height and width attributes to reserve space and prevent layout shifts.
• Remember that cross-origin content is limited by the same-origin policy, which can affect interactions.
• Ensure sandbox settings are properly configured, and test tokens like allow-scripts and allow-forms to balance security and functionality.
• Use the loading="lazy" attribute to defer the loading of offscreen iframes, especially on pages with heavy content.

FAQs on HTML Iframes

Are HTML iframes still used?

Yes, iframes are used to embed videos, maps, and external pages. Best practices advise using them sparingly due to performance and security concerns.

What is an iframe and why can it be problematic?

An iframe embeds an external document into your page. It is useful but can cause layout shifts, resource overhead, and issues with cross-origin scripting.

Are iframes a security risk?

Iframes can be a risk if not managed properly. Use the sandbox attribute and set permissions with allow to limit exposure.