精通HTML内联框架iframe的用法（进阶必备）-html教程-PHP中文网

iframe跨域通信必须用postmessage，因同源策略禁止直接dom访问，document.domain已废弃；需双方约定结构化消息格式，严格校验event.origin和event.source，禁用"*"targetorigin，并配合sandbox最小权限隔离。

精通html内联框架iframe的用法（进阶必备）

iframe跨域通信必须用 postMessage，别试 document.domain

同源策略下 iframe 与父页无法直接访问对方 DOM，强行读取 window.frames[0].contentWindow.document 会触发 SecurityError: Blocked a frame with origin "xxx" from accessing a cross-origin frame。document.domain 在现代浏览器中已被废弃（Chrome 88+、Firefox 79+ 完全移除），且仅适用于子域名相同场景，实际兼容性极差。

正确做法是双方约定消息格式，用 window.postMessage() 发送，主页面用 window.addEventListener('message', handler) 接收，并严格校验 event.origin：

// iframe 内部
window.parent.postMessage({ type: 'HEIGHT_UPDATE', height: 420 }, 'https://yourdomain.com');

// 主页面
window.addEventListener('message', (e) => {
  if (e.origin !== 'https://trusted-iframe.com') return;
  if (e.data.type === 'HEIGHT_UPDATE') {
    document.getElementById('myIframe').style.height = e.data.height + 'px';
  }
});

永远不要用 '*' 作为 targetOrigin，否则任何站点都能向你的页面发消息
接收方必须检查 e.source 是否为预期 iframe，避免被伪造消息劫持
消息体建议用结构化对象，而非原始字符串，便于扩展和类型判断

sandbox 属性不加等于裸奔，尤其加载第三方内容时

嵌入广告、统计脚本、用户生成内容等不可信资源时，sandbox 是唯一有效的隔离手段。不加 sandbox，iframe 内脚本可执行任意 JS、提交表单、弹窗、甚至发起 CSRF 请求——这比 XSS 更隐蔽。

常见错误是只写 sandbox="allow-scripts" 却漏掉 allow-same-origin 的后果：一旦加上该值，iframe 就获得同源权限，能绕过所有沙箱限制，相当于没开 sandbox。

最小权限原则：默认空值 sandbox=""，再按需添加 allow-scripts、allow-forms 等白名单
若需脚本但禁止弹窗，就别加 allow-popups；若不需要表单提交，就别开 allow-forms
allow-top-navigation 极度危险，允许 iframe 修改顶层页面 URL，常被用于钓鱼攻击

iframe 高度自适应不能靠 onload，得监听内部 resize 或 DOM 变化

iframe.onload 只在初始加载完成时触发一次，但 iframe 内容可能动态展开（如折叠菜单展开、图片懒加载后撑高、AJAX 渲染新内容），此时高度就错位了。

可靠方案是让 iframe 内部主动通知父页：“我变高了”。常用两种触发时机：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

监听 window.resize（适合响应式布局变化）
用 MutationObserver 监听 body 高度变化或关键节点插入（适合 SPA 动态渲染）

示例（iframe 内部）：

const observer = new MutationObserver(() => {
  const h = document.body.scrollHeight;
  window.parent.postMessage({ type: 'RESIZE', height: h }, '*');
});
observer.observe(document.body, { childList: true, subtree: true });

注意：'*' 在这里可接受，因为消息仅含高度数值，无敏感信息；但生产环境仍建议指定目标 origin。