和在html5中已被彻底删除,现代浏览器直接忽略或触发怪异模式;唯一合法内嵌机制是,它创建独立文档上下文并完整支持现代web标准。

浏览器根本不“解析”frameset和frame标签
现代浏览器(Chrome、Firefox、Edge、Safari)在 HTML5 模式下遇到 frameset 或 frame,不会将其当作语义化结构来解析或渲染,而是直接触发兼容性警告,并降级为“怪异模式(Quirks Mode)”或静默忽略。HTML5 标准已彻底移除这两个标签——它们不是“被废弃”,而是“被删除”。W3C 验证器会报错,document.querySelector('frameset') 返回 null,哪怕 DOM 树里看似存在,也已被解析器跳过。
真正被解析、执行、纳入渲染流程的只有 iframe。它不是“框架标签的替代品”,它就是 HTML5 中唯一合法的内嵌机制,且拥有完整独立的 browsing context。
-
frameset必须作为的直接子元素,不能嵌套在<div> 或任何其他标签内;现代解析器一见到就终止标准 DOM 构建流程 <li> <code>frame在 HTML5 中无对应 DOM 接口,document.frames仅对旧 IE 生效,现代浏览器返回空集合或undefined - 即使强制用
document.write('<frameset><frame src="a.html"></frameset>'),也不会重建页面布局,只会输出字符串文本 - 同源时,可通过
iframe.contentWindow.document访问子文档,但必须等load事件后才可用 - 跨域时,
contentDocument和contentWindow均为null,读取会抛出SecurityError -
src为空或about:blank时,仍会创建空文档上下文,可安全写入内容:iframe.contentDocument.write('<p>hi</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页,适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>') -
sandbox属性在解析阶段即生效,未声明allow-scripts就算子页含<script></script>也不会执行 - 在父页
写了<meta http-equiv="X-UA-Compatible" content="IE=edge">,以为能“带进” iframe → 实际无效 - 子页面没声明
X-UA-Compatible,又运行在 IE11 下 → 自动回退到 IE7 兼容模式,导致 JS 报错、CSS 错位 - 国产双核浏览器(如 360、QQ)中,父页加了
renderer=webkit,但子页没加 → 子页可能走 IE 内核,父子渲染不一致 - 起本地服务:用
python -m http.server 8000或 VS Code 的 Live Server 插件,让地址变成http://localhost:8000/,此时相对路径正常工作 - 改用绝对 URL:把
src="page.html"改成src="https://your-domain.com/page.html"(仅限测试环境)
iframe 的解析过程:从标签到独立文档
当 HTML 解析器遇到 iframe 标签时,行为与普通元素完全不同:它不生成普通 Element 节点并挂入当前 DOM 树,而是立即创建一个全新的 Document 对象、绑定独立的 window 和事件循环,并启动子文档加载流程。
这个过程不可跳过、不可模拟——哪怕你用 innerHTML = '<iframe src="x.html">'</iframe> 动态插入,浏览器也会立刻触发子文档初始化。关键点:
为什么 meta http-equiv="X-UA-Compatible" 对 iframe 无效
X-UA-Compatible 只影响当前文档的渲染模式切换,它由主文档的 中首个 <meta> 触发,且仅作用于该文档自身的解析器行为。而 iframe 加载的是全新文档,其渲染引擎版本完全由子文档自己的 <meta> 或 HTTP Header 决定——父页面无法越权控制。
常见误操作:
本地开发时 iframe src 白屏的真正原因
用 file:// 协议直接打开 HTML 文件时,<iframe src="page.html"></iframe> 几乎必然白屏,这不是路径写错,而是浏览器主动阻止:所有主流浏览器将 file:// 下的跨文件加载视为跨源请求,即使同目录也不允许读取本地文件。
解决方案只有两个,且必须二选一:
别试图用 iframe.src = 'data:text/html,...' 绕过——它虽能显示内容,但失去同源优势,无法用 JS 操作子文档,也绕不开沙箱限制。










