iframe 把一个独立的 browsing context 嵌进页面,src 指向目标 URL,width/height 控制尺寸,name 给框架命名后可用 a 标签的 target 把链接定向到框架内打开。典型用途是嵌入地图、视频、第三方组件、预览沙盒等不属于自己站的内容。frameborder 已被废弃,边框样式统一用 CSS 的 border 控制。
iframe 的坑主要在两个方向。一是同源策略:跨域iframe 无法读写其内部 DOM,父子页面通信只能通过 postMessage,这既是限制也是安全屏障。二是性能与体验:每个 iframe 都是独立的文档实例,加载成本高,移动端缩放和滚动经常出怪问题,搜索引擎也不会把 iframe 内容算进主页面。
<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>