必须用 iframe，因为只有 iframe 能创建独立浏览上下文，保障第三方表单的 js 执行、相对路径、cookie 携带及支付验证等关键逻辑正常运行。
必须用 iframe，没有替代方案。其他方式（比如 fetch + innerHTML）看似能“加载”，实则破坏表单的 JS 执行环境、相对路径、Cookie 携带和支付/验证等关键逻辑，嵌进去的是“尸体”，不是活页面。
为什么第三方表单只能走 iframe？
第三方表单通常部署在独立域名下（如 https://pay.example.com/form），浏览器同源策略会直接拦截脚本对其 DOM 的读写、事件监听和样式注入。只有 iframe 能创建独立浏览上下文（有自己的 window、document、location 和 Cookie 作用域），让表单在隔离环境中完整运行。
- 常见错误：用
fetch请求表单 HTML 后塞进div.innerHTML—— 表单提交 403、JS 报错Cannot read property 'submit' of null、图片/CSS 路径全 404 - 更隐蔽的坑：即使加了反向代理绕过 CORS，Cookie 不自动携带（尤其涉及登录态或 CSRF token），表单根本无法通过后端校验
-
object或embed标签不支持 HTML 渲染，仅适用于 PDF/Flash 等插件内容，已淘汰
iframe 基础嵌入必须设这 4 个属性
光写 <iframe src="..."></iframe> 很大概率失败或体验极差。以下属性缺一不可：
-
src：必须是完整 HTTPS URL（HTTP 会被现代浏览器降级或拦截） -
title：必须设置，否则无障碍审查失败（WCAG 2.1 A 级要求），且部分浏览器对无title的 iframe 会禁用某些 API -
sandbox：至少加"allow-scripts allow-same-origin"（若需跨域通信再加"allow-popups"），否则表单 JS 直接被禁用 -
referrerpolicy：设为"no-referrer-when-downgrade"，避免目标站因 referrer 头异常拒绝请求（尤其金融/支付类表单）
示例：
<iframe src="https://pay.example.com/form?uid=abc123" title="支付表单" sandbox="allow-scripts allow-same-origin allow-popups" referrerpolicy="no-referrer-when-downgrade" width="100%" height="600"></iframe>
跨域表单提交后如何通知父页？
表单提交成功（或失败）后，第三方页面通常会跳转或执行 JS 回调 —— 但父页无法直接监听。唯一可靠方式是双方约定使用 postMessage 主动通知：
- 第三方表单页 JS 中，在提交完成回调里调用：
window.parent.postMessage({ type: "form_submitted", status: "success", order_id: "xyz789" }, "https://yourdomain.com") - 你的父页监听：
window.addEventListener("message", (e) => { if (e.origin === "https://pay.example.com" && e.data.type === "form_submitted") { /* 处理结果 */ } }) - 务必校验
e.origin，不能只看e.data内容，否则恶意 iframe 可伪造消息 - 如果第三方不配合发消息，你只能监听
iframe的load事件并检查contentDocument.location.href（仅限同源跳转，跨域时该属性不可读）
高度自适应：避免滚动条割裂表单体验
第三方表单高度经常动态变化（如展开收起字段、加载验证提示），固定 height 会导致内部滚动条或底部被截断。解决方案分两步：
- 第三方表单页需注入一段轻量 JS（若可控）：
window.parent.postMessage({ type: "resize", height: document.body.scrollHeight }, "*") - 父页监听并调整 iframe 高度：
iframe.style.height = data.height + "px"，同时 CSS 加overflow: hidden防止双滚动条 - 若无法修改第三方代码，退而求其次：用
ResizeObserver监听 iframe 内容文档（仅同源有效）；跨域场景下，只能预估最大高度并设min-height+overflow-y: auto
最易被忽略的一点：第三方表单可能依赖 window.top 或 window.parent 进行重定向（如支付成功后跳转到商户首页）。若未在 sandbox 中明确允许 allow-top-navigation，这些跳转会静默失败，用户卡在空白页——但控制台不会报错，排查极难。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
