HTML iframe 使用指南

System-Administartor

2025-04-19 09:40:22

0次

HTML iframe 使用指南

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

基本语法

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

主要属性

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

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

width 和 height - 设置 iframe 的尺寸(像素或百分比)
```
<iframe src="page.html" width="500" height="300"></iframe>
```

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

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

frameborder - 是否显示边框(0=无边框，1=有边框)
```
<iframe src="page.html" frameborder="0"></iframe>
```

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

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

sandbox - 安全限制(HTML5 新增)

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

allowfullscreen - 允许全屏显示

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

现代使用建议

响应式 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>

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

替代内容:

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

实际应用示例

嵌入 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>

嵌入 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 实现。

上一篇：Node.js入门教程与实践指南

下一篇：Python比较运算符优先级

免责声明

本站为个人博客，博客所发布的一切破解软件、补丁、注册机和注册信息及软件的文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。

本站所有内容均来自网络，版权争议与本站无关，您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容，如有需要，请去软件官网下载正版。

访问和下载本站内容，说明您已同意上述条款。

本站为非盈利性站点，不贩卖软件，不会收取任何费用，所有内容不作为商业行为。

正在初始化播放器，请稍后

人生倒计时

今天已过去 20 小时

84%

本周已过去 2 天

28%

本月已过去 26 天

86%

今年已过去 8 个月零 26 天

66%

离春节还有137天4时

62%

HTML iframe 使用指南

HTML iframe 使用指南

基本语法

主要属性

现代使用建议

实际应用示例

相关内容

热门资讯

免责声明

正在初始化播放器，请稍后

人生倒计时