HTML iframes - iframe内联框架使用教程

基本用法

使用 src 属性指定要嵌入的页面URL：

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

iframe特性

iframe是一个独立的浏览上下文，有自己的文档对象模型（DOM）
iframe内的页面与父页面相互独立
可以通过JavaScript在两个页面之间通信

常用属性

属性	说明	示例
src	嵌入页面的URL	src="page.html"
width	iframe宽度（像素或百分比）	width="500" 或 width="100%"
height	iframe高度（像素）	height="300"
name	iframe名称，用于target链接	name="myFrame"
frameborder	边框（0或1）	frameborder="0"
scrolling	滚动条（yes/no/auto）	scrolling="no"
allowfullscreen	允许全屏	allowfullscreen

使用target链接

可以为链接设置 target 属性，让链接在iframe中打开：

<!-- 定义iframe -->
<iframe src="about:blank" name="myFrame" width="100%" height="300"></iframe>

<!-- 在iframe中打开链接 -->
<a href="page1.html" target="myFrame">打开页面1</a>
<a href="page2.html" target="myFrame">打开页面2</a>

去除边框

默认iframe有边框，可以使用CSS去除：

<iframe src="page.html" style="border: none;"></iframe>

或者使用frameborder属性：

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

响应式iframe

使用CSS使iframe响应式显示：

<style>
.responsive-iframe {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 比例 */
}

.responsive-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

<div class="responsive-iframe">
    <iframe src="video.html"></iframe>
</div>

安全性考虑

安全提示

X-Frame-Options：网站可以通过设置此响应头防止被iframe嵌入，防止点击劫持攻击
sandbox：使用sandbox属性限制iframe内的操作
referrerpolicy：控制请求来源信息

使用sandbox属性

<!-- 允许脚本和表单，但禁止其他功能 -->
<iframe src="page.html" sandbox="allow-scripts allow-forms"></iframe>

<!-- 最严格：只允许显示内容 -->
<iframe src="page.html" sandbox></iframe>

常见用途

嵌入第三方内容：如YouTube视频、Google地图、社交媒体插件
广告投放：在页面中嵌入广告
沙箱环境：隔离第三方代码
多标签页布局：在单页面应用中模拟多页面
文档预览：嵌入PDF或其他文档

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

交互式示例

在下面的代码编辑器中，尝试创建不同属性的iframe：

💻 在线代码编辑器

👁️ 预览效果

最佳实践

建议

尽量避免过多使用iframe，影响页面性能和SEO
使用sandbox属性限制iframe的权限，提高安全性
为iframe添加title属性，提高可访问性
使用loading="lazy"属性实现延迟加载，提高页面性能
考虑使用现代的Web组件或Shadow DOM替代iframe
确保嵌入的第三方内容符合安全标准