index.html中怎么使用内嵌框架iframe？-html教程-PHP中文网

标签用于在当前html文档中嵌入另一个文档，必需属性为src，需配合css控制尺寸、边框与响应式布局，并注意跨域限制、sandbox安全策略及移动端适配问题。

index.html中怎么使用内嵌框架iframe？

iframe 在 index.html 中直接写标签就能用，但多数人卡在内容不显示、滚动条失控、跨域白屏或移动端变形上——这些问题基本都出在属性选错或 CSS 配合不当。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

src 属性必须存在且可访问

src 是唯一必需属性，缺了就什么也不加载；但写了也不代表一定成功： - 本地文件路径（如 ./page.html）需通过 HTTP 服务打开，双击打开会触发跨域限制 - 外部网址（如 https://example.com）可能被对方设置 X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none'，此时 iframe 显示为空白，控制台报错 Refused to display 'xxx' in a frame because it set 'X-Frame-Options' to 'DENY' - 路径错误时无提示，只留空白区域，建议先在浏览器地址栏单独访问该 URL 确认可打开

width/height + frameborder=0 是基础组合

老式写法 frameborder="0" 仍有效，但现代项目更推荐用 CSS 控制边框和尺寸： - 不要混用 width="100%" height="400" 和 style="width: 100%; height: 400px;"，后者优先级更高，容易覆盖前者导致行为不一致 - frameborder="0" 只能开关边框，无法设圆角或阴影；换成 style="border: none; border-radius: 4px;" 更可控 - 像素值（如 height="500"）在移动设备上易造成横向滚动，百分比（height="100%"）需确保父容器有明确高度，否则失效

sandbox 属性不是可选项，而是安全底线

只要 src 指向第三方页面，就必须加 sandbox： - 最小可用值是 sandbox=""（空字符串），它禁用脚本、表单、插件、弹窗等所有能力 - 若需运行 JS，显式放开：比如 sandbox="allow-scripts"；需要调用父页面 API，则还必须加 allow-same-origin（但仅限同源，跨域时该 flag 无效） - 错误示范：sandbox="allow-scripts allow-same-origin" 用于嵌入 https://evil.com —— 这等于主动放弃同源策略保护

响应式布局靠 CSS，不是靠 width="100%"

单纯写 width="100%" 无法解决宽高比失真问题（比如嵌 YouTube 视频时被压扁）： - 正确做法是用 padding-top 百分比撑开容器高度：

<div style="position: relative; padding-top: 56.25%;">
  <iframe src="..." style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
</div>

- 其中 56.25% 对应 16:9 比例（9 ÷ 16 = 0.5625），其他比例按 height ÷ width 计算 - 必须配合 overflow: hidden 在父容器上，否则滚动条可能意外出现

真正难的不是把 iframe 写出来，而是判断什么时候不该用它——比如想传数据、想监听子页状态、想避免 SEO 折损，这些场景下 iframe 往往是妥协方案，而非最优解。