HTML iframe 使用指南

<iframe> (内联框架) 是 HTML 中用于在当前文档中嵌入另一个文档的元素。以下是 iframe 的基本用法和常见属性：

基本语法

<iframe src="URL" width="宽度" height="高度"></iframe>

主要属性

1. src - 指定要嵌入的文档的 URL

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

2. width 和 height - 设置 iframe 的尺寸(像素或百分比)

   <iframe src="page.html" width="500" height="300"></iframe>

3. name - 为 iframe 指定名称，可用于链接的 target 属性

   <iframe src="demo.html" name="iframe_a"></iframe>
   <a href="https://www.example.com" target="iframe_a">在 iframe 中加载</a>

4. frameborder - 是否显示边框(0=无边框，1=有边框)

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

5. scrolling - 是否显示滚动条(auto|yes|no)

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

6. sandbox - 安全限制(HTML5 新增)

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

7. allowfullscreen - 允许全屏显示

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

现代使用建议

1. 响应式 iframe (适应不同屏幕尺寸):

   <div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
     <iframe 
       src="https://www.youtube.com/embed/VIDEO_ID" 
       style="position:absolute; top:0; left:0; width:100%; height:100%;" 
       frameborder="0" 
       allowfullscreen>
     </iframe>
   </div>

2. 安全性考虑:

   • 使用 sandbox 属性限制嵌入内容的能力
   • 对于不受信任的内容，添加 sandbox 属性
   • 考虑使用 CSP (Content Security Policy) 限制 iframe 来源

3. 替代内容:

   <iframe src="page.html">
     <p>您的浏览器不支持 iframe，请<a href="page.html">点击这里</a>查看内容。</p>
   </iframe>

实际应用示例

1. 嵌入 YouTube 视频:

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

2. 嵌入 Google 地图:

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

注意：许多网站(如 YouTube、Google Maps)提供了专门的嵌入代码，通常使用 iframe 实现。