HTML iframe：嵌入网页、视频和地图

如何使用 iframe

<iframe> 在你的页面中显示另一个页面。在 src 中给出页面地址，加上描述它的 title，再设置尺寸：

<iframe src="https://example.com/" title="Example site" width="600" height="400"></iframe>

框架会把页面作为一个独立的文档加载，有自己的样式和脚本。本页的示例使用 srcdoc 而不是 src，它把框架的 HTML 直接写在属性里，所以不用加载其他网站也能运行：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    p { color: #2563eb; font-weight: 600; }
  </style>
</head>
<body>
  <p>This paragraph is in the outer page.</p>
  <iframe title="Inner page" width="320" height="120"
    srcdoc="<h1 style='font: 20px system-ui'>Hello from inside the frame</h1><p>The outer page's CSS does not reach me.</p>">
  </iframe>
</body>
</html>

外层段落是蓝色加粗的；框架里的段落却不是，尽管页面上有同样的 p 规则。样式永远不会跨越框架边界，两个方向都不会。默认边框和 300×150 的默认尺寸来自浏览器；width 和 height 属性会覆盖这个尺寸。

嵌入 YouTube 视频或地图

视频网站和地图服务会提供现成的 iframe 代码。在 YouTube 上，点击“分享”，然后点击“嵌入”：

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

对于 Google 地图，打开地点，点击“分享”，再选择“嵌入地图”，用同样的方式复制 iframe。保留 title（屏幕阅读器进入框架时会朗读它），并用下面的自适应 CSS 替换固定尺寸。allow 属性为框架授予自动播放、全屏等功能，嵌入的页面默认不能使用这些功能。

尺寸、边框和自适应 iframe

复制来的嵌入代码使用固定的像素尺寸，在手机上会溢出。width: 100% 加上 aspect-ratio 让框架填满容器并保持比例，border: 0 去掉默认的 inset 边框：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Responsive iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .embed {
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 0;
      border-radius: 8px;
      background: #111827;
    }
    .wrap { max-width: 480px; }
  </style>
</head>
<body>
  <div class="wrap">
    <iframe class="embed" title="Video placeholder"
      srcdoc="<body style='margin:0;height:100vh;display:grid;place-items:center;color:#fff;font:16px system-ui'>16:9 frame">
    </iframe>
  </div>
</body>
</html>

把 max-width: 480px 改成别的值，框架在任何宽度下都会保持 16:9 的比例。去掉 border: 0 就能看到浏览器的默认边框。旧的 frameborder、scrolling 和 marginheight 属性都已过时；请用 CSS。

sandbox：限制框架的能力

框架和任何页面一样，可以运行脚本、提交表单和打开弹出窗口。sandbox 属性会收回这些能力；空的 sandbox 几乎会阻止一切，每个关键字放开一项。下面两个框架拿到的是同样的 HTML，其中有一小段脚本：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sandbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { width: 240px; height: 70px; border: 2px solid #e5e7eb; border-radius: 6px; }
    code { display: block; margin: 8px 0 4px; }
  </style>
</head>
<body>
  <code>sandbox=""</code>
  <iframe id="a" sandbox="" title="Sandboxed frame"></iframe>
  <code>sandbox="allow-scripts"</code>
  <iframe id="b" sandbox="allow-scripts" title="Frame with scripts allowed"></iframe>
  <script>
    const html = '<p id="s" style="font: 15px system-ui">Scripts are blocked</p>' +
      '<script>document.getElementById("s").textContent = "JavaScript ran";<\/script>';
    document.getElementById('a').srcdoc = html;
    document.getElementById('b').srcdoc = html;
  </script>
</body>
</html>

第一个框架保留着占位文字，因为它的脚本根本没有运行（Chrome 的控制台会为此记录一条 “Blocked script execution” 消息）。只要嵌入的内容不完全可信，比如用户编写的 HTML，就使用 sandbox，并且只添加它需要的关键字：

对于来自你自己的源的内容，绝不要同时使用 allow-scripts 和 allow-same-origin：否则框架中的脚本可以移除自己的沙箱。

与框架通信：postMessage

外层页面和框架是两个独立的文档。当它们的源不同时，彼此无法访问对方的 DOM，但可以互相发送消息。输入一条消息，把它发送到框架中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>postMessage</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { display: block; width: 280px; height: 80px; margin-top: 10px; border: 2px solid #2563eb; border-radius: 6px; }
  </style>
</head>
<body>
  <input id="msg" value="Hello, frame">
  <button id="send">Send</button>
  <iframe id="frame" title="Message receiver" srcdoc="
    <p style='font: 15px system-ui' id='got'>Waiting for a message</p>
    <script>
      addEventListener('message', (e) => {
        document.getElementById('got').textContent = 'Received: ' + e.data;
      });
    </script>">
  </iframe>
  <script>
    document.getElementById('send').onclick = () => {
      const frame = document.getElementById('frame');
      frame.contentWindow.postMessage(document.getElementById('msg').value, '*');
    };
  </script>
</body>
</html>

在真实代码中，请传入框架的确切源（例如 'https://maps.example.com'）而不是 '*'，并在接收方检查 e.origin，确保消息只发给、也只来自你预期的网站。

性能，以及网站拒绝嵌入时

• 懒加载。 给页面下方较远处的框架加上 loading="lazy"；浏览器只会在读者滚动到附近时才加载它们。每个 iframe 都是一次完整的页面加载，所以嵌入内容很多的页面不加懒加载就会变慢。
• “拒绝连接”。 很多网站（银行、大多数社交网络、Google 搜索）会发送禁止被嵌入的 X-Frame-Options 或 frame-ancestors 响应头，浏览器会在框架中显示错误。你的页面无法绕过它。请使用该网站的官方嵌入 URL，或者改用链接。
• 无障碍访问。 一定要设置 title。屏幕阅读器靠它来称呼这个框架，一个页面上有好几个没有标题的框架时，用户很难在其中来回移动。

常见错误

• 缺少 title。 屏幕阅读器会把框架朗读为未命名。
• 复制来的嵌入代码使用固定宽度。 把它们换成 width: 100% 和 aspect-ratio。
• 用 iframe 嵌入普通视频文件。 对于你自己的 .mp4 文件，请使用 video 元素；iframe 是用来嵌入页面的。
• 信任框架中的内容。 不是你写的内容，都要加上 sandbox。
• 以为外层 CSS 能设置框架的样式。 要在框架页面内部设置它的样式。