和在html5中已被彻底移除，非“不推荐”而是语法错误，浏览器直接忽略并可能退入怪异模式；它们破坏语义、损害seo与可访问性，必须用css grid/flexbox配合替代。
frameset 和 frame 标签已废弃，现代项目中不应使用
为什么不能用 frameset 和 frame
这两个标签在 HTML5 中被正式移除，所有主流浏览器虽仍能解析，但会触发控制台警告（如 Chrome 显示 “frameset is deprecated”），且无法通过 W3C 验证。它们破坏页面语义结构，导致 SEO 极差、无障碍访问失效（屏幕阅读器难以导航）、打印异常、前进/后退行为混乱——根本不是“兼容旧代码”的合理理由，而是技术债。
iframe 是唯一合法的框架类方案
只有 iframe 被 HTML5 明确保留并持续增强，适用场景明确且可控：
- 嵌入第三方内容：比如 YouTube 视频、Google Maps、Twitch 直播，必须用
iframe，因为目标站点通常禁止frame加载 - 隔离沙箱环境：配合
sandbox属性（如sandbox="allow-scripts allow-same-origin"）限制嵌入页权限，防止 XSS 或 DOM 劫持 - 微前端或模块化加载：将独立构建的子应用（如 React/Vue 子模块）以
iframe形式集成，天然隔离 JS 全局作用域和样式污染 - 文档预览：PDF、Office 文件在线查看（如
src="https://docs.google.com/gview?embedded=true&url=..."）
响应式 iframe 的关键细节
直接写 width="100%" height="400" 在移动端必然失败——高度固定会导致内容截断或留白。正确做法是用 CSS 实现宽高比锁定：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
<div style="position: relative; padding-top: 56.25%; overflow: hidden;"> <iframe src="https://example.com" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"> </iframe> </div>
其中 padding-top: 56.25% 对应 16:9 纵横比（9/16 = 0.5625）。若需适配不同比例，改该值即可（如 4:3 → 75%）；同时必须加 border: none，否则默认边框在部分浏览器中不可去除。
跨域通信与安全边界
iframe 默认受同源策略限制：window.frames[0].document 会抛出 SecurityError。若需通信：
- 同域：直接操作
contentWindow或contentDocument - 跨域：必须双方协作使用
window.postMessage()，且接收方必须校验event.origin，否则等于开放 XSS 入口 - 禁用 JS 执行：设
sandbox="allow-scripts"不够，要彻底禁用脚本就留空sandbox=""，但此时postMessage也失效
真正容易被忽略的是：即使设置了 sandbox，若漏掉 allow-same-origin，跨域 iframe 就无法调用 postMessage —— 这个组合条件常被误认为“只要开了 sandbox 就能通信”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
