终于能自适应内容高度的 iframe
来源：alfy.blog — 2026-10-09
📋 概述
Chrome 154 让 iframe 用一行 CSS 跟随内容高度，不再需要测量、postMessage 或 resize 脚本。父页面写 frame-sizing: content-height，被嵌入页面在 head 里放一个 meta 标签并列出允许为其定尺寸的来源，浏览器便自行完成测量与调整。代价是必须双向配合：支付提供商、评论组件等第三方页面得主动加 meta 并在内容变化时调用 requestResize()。目前仅 Chromium 支持，需以固定高度为默认并用 @supports 渐进增强。
🔑 核心要点
- 父页面一行 frame-sizing: content-height 即可让 iframe 跟随内容
- 被嵌页面须在 head 里放 meta 标签并声明 allow-origins，且不能事后用 JS 添加
- 内容变化时调用 window.requestResize()，无需再自己测量
- 不再需要 postMessage 监听与 origin 校验
- 关键限制：得第三方页面配合，支付场景全看提供商是否支持
- 目前仅 Chromium 支持，应保留固定高度并用 @supports 渐进增强
💡 金句
多年来，一个简单的布局需求——让这个盒子跟内容一样高——需要两个网站上的两段脚本，还得就消息格式达成一致。
👍 0
👎 0
← 返回 Lobsters 首页