Kenhuang Academy
  • English

      • HTML Iframes

      What is an Iframe?

      An iframe (inline frame) is an HTML element used to embed another webpage within the current webpage. Using the <iframe> tag, you can display another independent HTML document within a page.

      Basic Syntax

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

      Iframe Attributes

      src Attribute

      The src attribute specifies the URL of the page to embed:

      <iframe src="https://www.example.com"></iframe>

      width and height Attributes

      Set the width and height of the iframe:

      <iframe src="demo.html" width="800" height="600"></iframe>

      frameborder Attribute

      Controls whether to display a border (deprecated in HTML5, use CSS instead):

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

      name Attribute

      Specify a name for the iframe, which can be used as a link target:

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

      scrolling Attribute

      Controls scrollbar display (deprecated in HTML5):

      <iframe src="demo.html" scrolling="no"></iframe>

      Styling Iframes with CSS

      It's recommended to use CSS to control iframe styles:

      <iframe src="demo.html" style="border: none; width: 100%; height: 500px;"></iframe>

      Or use CSS classes:

      .responsive-iframe {
    width: 100%;
    height: 500px;
    border: 2px solid #ccc;
    border-radius: 8px;
}
      <iframe src="demo.html" class="responsive-iframe"></iframe>

      Responsive Iframes

      Create responsive iframes that adapt to different screen sizes:

      <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe 
        src="demo.html" 
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;">
    </iframe>
</div>

      Common Uses

      Embedding Videos

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

      Embedding Maps

      <iframe 
    src="https://www.google.com/maps/embed?pb=..." 
    width="600" 
    height="450" 
    style="border:0;" 
    allowfullscreen="" 
    loading="lazy">
</iframe>

      Embedding Social Media Content

      <iframe 
    src="https://www.facebook.com/plugins/post.php?..." 
    width="500" 
    height="600" 
    style="border:none;overflow:hidden">
</iframe>

      Security Considerations

      sandbox Attribute

      The sandbox attribute adds extra security restrictions to the iframe:

      <iframe src="untrusted.html" sandbox></iframe>

      You can specify allowed features:

      <iframe 
    src="demo.html" 
    sandbox="allow-scripts allow-same-origin">
</iframe>

      Common sandbox values:

      • allow-forms - Allow form submission
      • allow-scripts - Allow script execution
      • allow-same-origin - Allow same-origin access
      • allow-popups - Allow popups

      Cross-Origin Restrictions

      For security reasons, browsers restrict cross-origin iframe access. Use X-Frame-Options or Content-Security-Policy headers to control whether a page can be embedded.

      Best Practices

      1. Always specify width and height to avoid layout shifts
      2. Use CSS instead of HTML attributes for styling
      3. Consider performance impact - iframes increase page load time
      4. Be mindful of security - only embed trusted content
      5. Provide fallback content in case iframes are not supported
      <iframe src="demo.html">
    <p>Your browser does not support iframes. Please <a href="demo.html">click here</a> to view the content.</p>
</iframe>

      Complete Example

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iframe Example</title>
    <style>
        .iframe-container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        
        .responsive-iframe {
            width: 100%;
            height: 400px;
            border: none;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="iframe-container">
        <h2>Embedded Webpage</h2>
        <iframe 
            src="https://www.example.com" 
            class="responsive-iframe"
            title="Example webpage">
        </iframe>
    </div>
</body>
</html>

      Notes

      • Iframes may affect SEO as search engines may not fully index iframe content
      • Excessive use of iframes can impact page performance
      • Some websites prohibit being embedded in iframes
      • Iframes on mobile devices may have scrolling and interaction issues

      Summary

      Iframes are a powerful tool for embedding external content in webpages. When used properly, iframes can enhance webpage functionality, but be mindful of security and performance issues. In modern web development, iframes should be used judiciously, and consider whether there are better alternatives.