Iframe in html

In HTML, the <iframe> (short for inline frame) element is used to embed another HTML document within the current document. This allows you to display external web content, such as web pages, multimedia files, or other interactive elements, within a specific area of your webpage.


Key Characteristics of <iframe>:

  1. Embedding Content: An <iframe> can display content from a different URL or a different part of the same document.
  2. Isolation: The embedded content runs independently of the surrounding content.
  3. Attributes: Several attributes control the behavior and appearance of the <iframe>, such as src, width, height, name, sandbox, and more.


Common Attributes of <iframe>:

  • src: Specifies the URL of the page to embed.
  • width: Sets the width of the iframe.
  • height: Sets the height of the iframe.
  • name: Gives a name to the iframe (useful for targeting form submissions).
  • sandbox: Adds restrictions to the content within the iframe.
  • allow: Specifies features that the iframe content is allowed to use.
  • srcdoc: Embeds HTML content directly into the iframe.


Basic Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Iframe Example</title>
</head>
<body>
    <h1>Embedding an External Webpage</h1>
    <iframe src="https://www.example.com" width="600" height="400" title="Example Website"></iframe>
</body>
</html>

This example embeds the webpage from https://www.example.com into the current document, with a width of 600 pixels and a height of 400 pixels.


Advanced Examples:

1. Iframe with Local HTML Content:

You can embed HTML content directly into an iframe using the srcdoc attribute.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iframe with Local Content</title>
</head>
<body>
    <h1>Embedding Local HTML Content</h1>
    <iframe srcdoc="<p>This is a paragraph inside an iframe.</p>" width="300" height="200" title="Local Content"></iframe>
</body>
</html>

In this example, the iframe displays a simple paragraph embedded directly using the srcdoc attribute.


2. Iframe with Sandbox Attribute:

The sandbox attribute applies extra restrictions to the content within the iframe for security purposes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iframe with Sandbox</title>
</head>
<body>
    <h1>Embedding an Iframe with Sandbox</h1>
    <iframe src="https://www.example.com" width="600" height="400" title="Sandboxed Iframe" sandbox></iframe>
</body>
</html>

In this example, the iframe is sandboxed, which means it will have limited capabilities (e.g., it cannot run scripts or submit forms unless explicitly allowed).


3. Iframe with Allow Attribute:

The allow attribute specifies what features the iframe content can use, such as geolocation, microphone, camera, etc.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iframe with Allow Attribute</title>
</head>
<body>
    <h1>Embedding an Iframe with Feature Permissions</h1>
    <iframe src="https://www.example.com" width="600" height="400" title="Iframe with Allow" allow="geolocation; microphone; camera"></iframe>
</body>
</html>

In this example, the iframe content is granted permissions to access the user's geolocation, microphone, and camera.


Conclusion:

The <iframe> element is a versatile tool in HTML that enables the embedding of external or local content within a webpage.

By leveraging its attributes, you can control the behavior, appearance, and security of the embedded content, making it a powerful component for creating complex web applications.