iframe 高级用法

<iframe> 元素用于在当前页面中嵌入另一个HTML文档，是第三方内容嵌入的标准方式。

基本语法

<iframe
  src="https://example.com"
  width="800"
  height="600"
  title="嵌入内容描述"
></iframe>

核心属性

安全沙箱（sandbox）

基本使用

<!-- 最严格限制 -->
<iframe sandbox src="content.html"></iframe>

<!-- 允许特定权限 -->
<iframe
  sandbox="allow-scripts allow-forms"
  src="form.html"
></iframe>

sandbox 权限值

权限组合示例

<!-- 允许脚本和表单 -->
<iframe sandbox="allow-scripts allow-forms" src="widget.html"></iframe>

<!-- 允许脚本和同源访问 -->
<iframe sandbox="allow-scripts allow-same-origin" src="app.html"></iframe>

<!-- 允许脚本、表单、弹窗 -->
<iframe
  sandbox="allow-scripts allow-forms allow-popups"
  src="payment.html"
></iframe>

注意：同时使用 allow-scripts 和 allow-same-origin 会绕过大部分沙箱限制。

权限策略（allow）

<iframe
  allow="camera; microphone; geolocation"
  src="video-call.html"
></iframe>

<!-- 具体权限配置 -->
<iframe
  allow="camera *; microphone 'self' https://trusted.com"
  src="meeting.html"
></iframe>

常用权限

内联内容（srcdoc）

<iframe
  srcdoc="<h1>Hello World</h1><p>这是内联内容</p>"
  sandbox
></iframe>

<!-- 复杂内容使用转义 -->
<iframe
  srcdoc="&lt;html&gt;&lt;body&gt;&lt;h1&gt;标题&lt;/h1&gt;&lt;/body&gt;&lt;/html&gt;"
></iframe>

懒加载

<!-- 懒加载iframe -->
<iframe
  src="heavy-content.html"
  loading="lazy"
  width="800"
  height="600"
></iframe>

跨域通信（postMessage）

发送消息

// 父页面发送消息给iframe
const iframe = document.getElementById('myIframe');

iframe.contentWindow.postMessage(
  { type: 'DATA_UPDATE', data: { name: '张三' } },
  'https://child-domain.com'
);

接收消息

// iframe内接收消息
window.addEventListener('message', (event) => {
  // 验证来源
  if (event.origin !== 'https://parent-domain.com') {
    return;
  }

  console.log('收到消息:', event.data);

  // 回复消息
  event.source.postMessage(
    { type: 'REPLY', data: '收到' },
    event.origin
  );
});

父页面接收回复

// 父页面接收iframe消息
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://child-domain.com') {
    return;
  }
  console.log('iframe回复:', event.data);
});

响应式iframe

<div class="iframe-container">
  <iframe src="content.html" title="响应式内容"></iframe>
</div>

<style>
.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

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

常见嵌入场景

嵌入视频

<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
  src="https://www.google.com/maps/embed?pb=..."
  width="600"
  height="450"
  style="border:0"
  allowfullscreen
  loading="lazy"
></iframe>

要点总结

• sandbox 属性限制 iframe 权限，提升安全性
• allow 属性控制摄像头、麦克风等敏感权限
• postMessage 实现跨域安全通信，需验证 origin
• loading="lazy" 实现懒加载，优化性能
• 始终添加 title 属性提升无障碍性