HTML5已彻底移除frame和frameset标签，现代浏览器直接忽略、静默失效；唯一合法替代是iframe，需配合CSS Grid/Flex布局、title属性及postMessage通信。
FRAME 标签早已被现代浏览器废弃，不要在新项目中使用
HTML5 完全移除了 <frame> 和 <frameset>，所有主流浏览器（Chrome、Firefox、Safari、Edge）已停止支持渲染，且会直接忽略这些标签。如果你看到页面里还有 <frame src="...">，它不会加载内容，也不会报错——只是静默失效。
常见错误现象：<frameset> 包裹的页面空白、开发者工具里 <frame> 元素显示为“not rendered”、控制台无报错但内容不出现。
- 替代方案只有
<iframe>：它是唯一被 HTML5 保留并持续维护的内嵌框架标签 -
<frame>无法用 CSS 控制尺寸或交互，而<iframe>支持width、height、loading="lazy"、sandbox等现代属性 - SEO 和可访问性上，
<iframe>支持title属性（必须设置，否则屏幕阅读器无法识别）
用 iframe 替代 frame 的最小可行写法
把旧的 <frameset cols="20%,80%"><frame src="nav.html"><frame src="main.html"></frameset> 拆成两个独立区域，需用 CSS 布局 + <iframe> 手动实现。
最简替换示例：
立即学习“前端免费学习笔记（深入）”；
<div style="display: flex; height: 100vh;"> <aside style="width: 20%;"><iframe src="nav.html" title="导航菜单"></iframe></aside> <main style="flex: 1;"><iframe src="main.html" title="主内容区"></iframe></main> </div>
-
title属性不可省略，否则违反 WCAG 可访问性要求 - 默认
<iframe>有边框和滚动条，可用style="border: none; overflow: hidden;"控制 - 跨域 iframe 无法通过 JavaScript 访问其 DOM，这是安全限制，不是 bug
iframe 加载失败时如何判断和降级
<iframe> 不像 <img> 有 onerror 事件，但可通过 load 和 error 事件组合监听加载状态。
- 监听
load表示资源成功加载（哪怕页面是 404，只要 HTTP 响应返回了，也算 load） - 真正失败（网络中断、DNS 失败）会触发
error事件，但仅限同源或 CORS 配置允许的场景 - 更可靠的做法是设超时：用
setTimeout在 5s 后检查iframe.contentDocument是否为空 - 降级建议：用
<div>占位 + 文字提示，避免白屏；不要尝试自动重试，可能触发重复请求
iframe 与父页面通信的边界和风险
跨域 iframe 之间通信只能靠 window.postMessage()，这是唯一安全且标准的方式。
-
postMessage()发送方必须指定目标 origin（如"https://example.com"），不能用"*"—— 生产环境禁用通配符 - 接收方必须校验
event.origin，否则可能被恶意站点伪造消息 - iframe 内 JS 无法直接调用父页面函数，反之亦然；所有交互必须序列化为 JSON 传递
- 注意内存泄漏：如果父页面未清理
message监听器，iframe 卸载后仍可能触发回调
复杂点在于，iframe 的生命周期和父页面不同步——它可能提前加载完成，也可能延迟挂载，通信逻辑得适配这两种节奏。容易被忽略的是，移动端 WebView 对 postMessage 的兼容性差异，比如某些 Android 低版本需要手动注入 bridge 脚本。
