您现在的位置是：网站首页 > <iframe>-内联框架文章详情
<iframe>-内联框架
陈川
【
HTML
】
61510人已围观
3885字
<iframe> 是 HTML 中用于嵌入外部内容的内联框架标签，它允许在当前页面中加载并显示另一个独立的 HTML 文档。通过调整属性，可以控制框架的尺寸、边框、滚动行为等特性，同时需注意安全性限制和跨域问题。
<iframe> 的基本语法
<iframe> 标签的基本结构如下：
<iframe src="URL" width="300" height="200" title="示例框架"></iframe>
src：指定要嵌入的文档的 URL，可以是绝对路径或相对路径。width和height：定义框架的宽度和高度，默认单位为像素，也可使用百分比。title：为框架提供可访问性描述，屏幕阅读器会读取此属性。
如果 src 未指定或为空，框架会显示一个空白页面：
<iframe width="300" height="200" title="空白框架"></iframe>
常用属性详解
边框与样式控制
通过 frameborder 和 style 属性可调整边框外观：
<!-- 移除边框 -->
<iframe src="demo.html" frameborder="0"></iframe>
<!-- 使用 CSS 完全控制样式 -->
<iframe src="demo.html" style="border: 2px dashed #ccc; border-radius: 8px;"></iframe>
滚动行为
scrolling 属性控制滚动条的显示（部分浏览器已废弃，建议用 CSS 替代）：
<!-- 强制显示滚动条 -->
<iframe src="longpage.html" scrolling="yes"></iframe>
<!-- 完全禁用滚动 -->
<iframe src="longpage.html" scrolling="no" style="overflow: hidden;"></iframe>
安全性限制
sandbox 属性通过白名单机制限制框架行为，防止恶意操作：
<!-- 禁止脚本执行和表单提交 -->
<iframe src="user-content.html" sandbox></iframe>
<!-- 允许脚本但禁止顶级导航 -->
<iframe src="widget.html" sandbox="allow-scripts"></iframe>
动态内容交互
父子页面通信
通过 postMessage API 实现跨域通信：
<!-- 父页面代码 -->
<iframe id="childFrame" src="https://child-domain.com"></iframe>
<script>
const frame = document.getElementById('childFrame');
frame.onload = () => {
frame.contentWindow.postMessage('Hello from parent!', 'https://child-domain.com');
};
window.addEventListener('message', (e) => {
if (e.origin === 'https://child-domain.com') {
console.log('Child says:', e.data);
}
});
</script>
<!-- 子页面代码 -->
<script>
window.addEventListener('message', (e) => {
if (e.origin === 'https://parent-domain.com') {
console.log('Parent says:', e.data);
e.source.postMessage('Message received!', e.origin);
}
});
</script>
自适应高度
通过 JavaScript 实现框架内容高度自适应：
<iframe id="autoHeight" src="dynamic-content.html"></iframe>
<script>
const iframe = document.getElementById('autoHeight');
iframe.onload = () => {
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
};
</script>
实际应用场景
嵌入第三方服务
常见于地图、社交媒体插件等：
<!-- 嵌入 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.215022012866!2d-73.98784468459384!3d40.74844097932789!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>
广告与统计分析
需注意 referrerpolicy 和 loading 属性：
<!-- 延迟加载的广告框架 -->
<iframe
src="https://adserver.com/ad"
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
width="728"
height="90">
</iframe>
性能优化技巧
懒加载技术
使用 loading="lazy" 延迟加载非关键框架：
<iframe
src="secondary-content.html"
loading="lazy"
width="300"
height="200">
</iframe>
预连接优化
在 <head> 中添加预连接提示：
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://cdn.example.com">
安全防护措施
点击劫持防御
通过 X-Frame-Options 响应头防止被恶意嵌入：
HTTP/1.1 200 OK
X-Frame-Options: SAMEORIGIN
Content-Type: text/html
CSP 策略限制
内容安全策略中配置框架来源：
<meta http-equiv="Content-Security-Policy" content="frame-src 'self' https://trusted.com;">
浏览器兼容性备忘
- 旧版 IE 支持
allowTransparency属性处理透明背景 - 移动端 Safari 对全屏 API 有特殊限制
- Firefox 78+ 支持
loading="lazy"属性 - Chromium 内核浏览器支持
csp属性直接设置策略
上一篇： <script>-客户端脚本
下一篇： <frame>-框架(已废弃)
