HTML <iframe> Element

Publish in HTML Tutorial el 24/05/2025 15:43

The HTML <iframe> (Inline Frame) element embeds another HTML page within the current document. It creates a nested browsing context, essentially allowing you to display a webpage within a webpage. IFrames are commonly used for embedding videos, maps, advertisements, or other external content while keeping it isolated from your main page.

Key Attributes

src: Specifies the URL of the page to embed
width/height: Sets dimensions (in pixels or percentage)
frameborder: Shows/hides border (0 or 1, deprecated in HTML5)
allowfullscreen: Enables fullscreen mode
sandbox: Applies security restrictions
loading: Controls lazy loading (lazy/eager)

Basic Syntax

Here's the basic structure of an iframe:

Examples of Usage

Example 1: Embedding Google Maps

This example shows how to embed a Google Maps location:

Play Code

    
<iframe 
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215495579492!2d-73.9878449241646!3d40.74844047192571!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1623251234567!5m2!1sen!2sus" 
    width="400" 
    height="300" 
    style="border:0;" 
    allowfullscreen="" 
    loading="lazy"></iframe>

Example 2: Embedding YouTube Video

Embedding a YouTube video with responsive sizing:

Play Code

    
<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen></iframe>

Example 3: Sandboxed Content

This example shows a sandboxed iframe with restricted permissions:

Play Code

    <iframe src="https://example.com" width="400" height="200" 
    sandbox="allow-scripts allow-same-origin"></iframe>

Example 4: Dynamic Iframe with JavaScript

Changing iframe content dynamically with JavaScript:

Play Code

    <iframe id="dynamicFrame" width="400" height="200"></iframe>
    <button onclick="document.getElementById('dynamicFrame').src='https://wikipedia.org'">
      Load Wikipedia
    </button>
    <button onclick="document.getElementById('dynamicFrame').src='https://example.com'">
      Load Example
    </button>

Example 5: Communication Between Parent and Iframe

Basic communication between parent window and iframe using postMessage:

Play Code

    <iframe id="messageFrame" src="about:blank" width="400" height="200"></iframe>
    <button onclick="sendMessage()">Send Message to Iframe</button>
    <script>
      function sendMessage() {
        const frame = document.getElementById('messageFrame');
        frame.contentWindow.postMessage('Hello from parent!', '*');
      }
      
      // Listen for messages from iframe
      window.addEventListener('message', (event) => {
        console.log('Message from iframe:', event.data);
      });
    </script>