html框架标签怎么用_html中使用iframe嵌入网页教程-html教程-PHP中文网

iframe 是 html5 唯一合法内嵌网页机制，替代已废弃的 frameset/frame；本地 file:// 协议下相对路径 src 会因安全策略白屏，须起本地服务或用完整 url；高度自适应需同源 js 获取 scrollheight 或跨域 postmessage；flex/grid 中需防塌陷（如 flex-shrink: 0）；移动端需外层容器 overflow + -webkit-overflow-scrolling 优化。

html框架标签怎么用_html中使用iframe嵌入网页教程

iframe 标签不是“框架标签”的现代替代品，它就是 HTML5 中唯一合法、被广泛支持的内嵌网页机制。旧版 frameset 和 frame 已被完全废弃，任何新项目都必须用 iframe。

为什么 src 写相对路径会白屏？

浏览器对 iframe 的 src 做了严格协议校验：本地双击打开 HTML 文件（file:// 协议）时，src="page.html" 或 src="./page.html" 会被拒绝加载，控制台报 Not allowed to load local resource。

开发阶段务必起本地服务，例如 python3 -m http.server 8000，然后写 src="http://localhost:8000/page.html"
生产环境必须写完整 URL，如 src="https://example.com/widget.html"，不能省略 https://
即使同域，也要确认目标 HTML 能独立访问——它不能依赖父页 JS 渲染，否则 iframe 加载的是空壳

怎么让 iframe 高度自适应内容？

纯 CSS 无法实现自动撑高。浏览器不会读取子页面 document.body.scrollHeight，除非同源且你主动用 JS 获取。

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

同域场景：监听 iframe.onload，再读 iframe.contentDocument.body.scrollHeight，然后设 iframe.style.height = height + 'px'
跨域场景：子页必须主动发 postMessage({ type: 'height', value: document.body.scrollHeight })，父页监听 message 并校验 event.origin 后更新高度
别在 onload 立即设高——Vue/React 页面可能异步渲染，建议加 setTimeout 延迟 300ms 或监听子页 DOMContentLoaded

iframe 在 Flex/Grid 布局里为啥塌陷或溢出？

iframe 是替换元素（replaced element），行为类似 img，在弹性或网格容器中容易失控。

Flex 容器中加 style="flex-shrink: 0"，否则可能被压缩成 0 高度
Grid 容器避免只写 grid-template-rows: auto，改用 grid-template-rows: minmax(0, 1fr) 或显式设行高（如 600px）
所有场景下，iframe 必须配 width: 100%; height: 100%，但前提是其父容器有确定高度（比如 height: 600px 或 min-height: 600px）
object-fit 对 iframe 无效，别试