HTML 词条目录
前端Wiki/词条/iframe 内嵌框架

iframe 内嵌框架

定义在当前页面里再开一个窗口,完整嵌入另一个网页

iframe 把一个独立的 browsing context 嵌进页面,src 指向目标 URL,width/height 控制尺寸,name 给框架命名后可用 a 标签的 target 把链接定向到框架内打开。典型用途是嵌入地图、视频、第三方组件、预览沙盒等不属于自己站的内容。frameborder 已被废弃,边框样式统一用 CSS 的 border 控制。

iframe 的坑主要在两个方向。一是同源策略:跨域iframe 无法读写其内部 DOM,父子页面通信只能通过 postMessage,这既是限制也是安全屏障。二是性能与体验:每个 iframe 都是独立的文档实例,加载成本高,移动端缩放和滚动经常出怪问题,搜索引擎也不会把 iframe 内容算进主页面。

HTML
<style>
  .frame { width: 100%; height: 160px; border: 2px solid #4a9eff;
           border-radius: 8px; }
  .toolbar { display: flex; gap: 8px; margin-bottom: 6px; }
  .toolbar a { padding: 3px 10px; background: #f0f7ff;
               border-radius: 5px; color: #4a9eff; }
</style>
<div class="toolbar">
  <a href="https://www.example.com" target="preview">示例站</a>
  <a href="https://www.example.org" target="preview">切换站点</a>
</div>
<iframe class="frame" name="preview"
        src="https://www.example.com"></iframe>
⚠ 常见误区
🔗 相关词条网页文档结构
← 返回来源章节网页