`<iframe>` - inline frame

<iframe> is an inline frame tag in HTML used to embed another document. It allows loading and displaying other web pages, videos, maps, etc., within the current page, commonly used for integrating third-party resources or achieving modular layouts.

Basic Syntax of <iframe>

The basic syntax of <iframe> is as follows:

<iframe src="URL" width="width" height="height"></iframe>

• src: Specifies the URL of the document to be embedded.
• width and height: Define the dimensions of the frame, which can be in pixels or percentages.

For example, embedding a simple webpage:

<iframe src="https://example.com" width="600" height="400"></iframe>

Common Attributes of <iframe>

In addition to src, width, and height, <iframe> supports the following common attributes:

name

Specifies a name for the frame, making it easier for other elements (such as <a> or <form>) to reference it via the target attribute.

<iframe src="demo.html" name="myFrame"></iframe>
<a href="newpage.html" target="myFrame">Open in frame</a>

frameborder

Controls whether to display a border (deprecated; recommended to use the CSS border property instead).

<iframe src="demo.html" frameborder="0"></iframe>

allowfullscreen

Allows the frame content to be displayed in fullscreen, commonly used for embedding videos.

<iframe src="video.html" allowfullscreen></iframe>

sandbox

Restricts the permissions of the frame to enhance security. Optional values include allow-forms, allow-scripts, etc.

<iframe src="untrusted.html" sandbox="allow-scripts"></iframe>

loading

Controls the lazy loading behavior of the frame. Options are eager (load immediately) or lazy (load lazily).

<iframe src="large-content.html" loading="lazy"></iframe>

Practical Applications of <iframe>

Embedding Third-Party Content

<iframe> is commonly used to embed third-party resources like YouTube videos or Google Maps.

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  frameborder="0" 
  allowfullscreen>
</iframe>

Implementing Modular Layouts

<iframe> can combine multiple independent pages into a single complete page.

<iframe src="header.html" width="100%" height="80"></iframe>
<iframe src="content.html" width="100%" height="400"></iframe>
<iframe src="footer.html" width="100%" height="50"></iframe>

Nested Communication

Parent pages and child pages within <iframe> can communicate across domains using postMessage.

Parent page code:

<iframe id="childFrame" src="child.html"></iframe>
<script>
  const frame = document.getElementById('childFrame');
  frame.contentWindow.postMessage('Hello from parent!', '*');
</script>

Child page (child.html) code:

<script>
  window.addEventListener('message', (event) => {
    console.log('Received:', event.data);
  });
</script>

Security Issues with <iframe>

Clickjacking

Malicious websites may overlay transparent <iframe> elements to trick users into clicking. Defend against this by setting the X-Frame-Options response header:

X-Frame-Options: DENY

Cross-Origin Restrictions

By default, <iframe> is subject to the same-origin policy. For cross-origin access, cooperation between both parties is required:

<iframe src="https://other-domain.com" allow="cross-origin-isolated"></iframe>

Alternatives to <iframe>

In some scenarios, other technologies may be more suitable than <iframe>:

• AJAX/Fetch: Dynamically load content and insert it into the DOM.
• Web Components: Achieve encapsulation via <template> and Shadow DOM.
• <object> or <embed>: Embed plugin content (e.g., PDFs).

Performance Optimization for <iframe>

Excessive use of <iframe> may cause performance issues. Optimization suggestions:

1. Use loading="lazy" to lazily load non-critical frames.
2. Dynamically control the src attribute to avoid loading multiple frames simultaneously.
3. Remove hidden or unused <iframe> elements:

<iframe src="heavy-content.html" id="dynamicFrame"></iframe>
<script>
  setTimeout(() => {
    document.getElementById('dynamicFrame').remove();
  }, 5000);
</script>

Browser Compatibility for <iframe>

<iframe> is supported by all modern browsers, but some attributes (e.g., loading) require attention to compatibility:

Detailed compatibility data can be queried via Can I use.