iframe常见坑：跨域、高度自适应、通信解决方案

iframe 常见坑跨域、高度自适应、通信解决方案做前端开发的同学或多或少都用过 iframe。不管是后台系统嵌入第三方页面、集成老项目模块、嵌套表单页面iframe 都是最省事的快速集成方案。但说实话iframe 看着简单真正落地开发全是坑。我之前做后台管理系统集成项目被 iframe 的三个问题折磨了很久高度无法自适应、跨域报错、父子页面无法通信。网上很多教程只给零散代码解决不了实际业务问题。今天我结合自己的项目实战经历把 iframe 开发中最高频的三大难题高度自适应、跨域限制、父子页面通信一次性讲透附带完整可直接复用的代码帮大家彻底避开 iframe 开发陷阱。一、最头疼的问题iframe 高度自适应失效默认情况下iframe 必须固定宽高高度不会跟随内部页面内容自动适配。内容少会留白内容多会出现滚动条页面观感极差这是开发中最直观的问题。很多新手直接写固定 height适配不同页面完全不通用体验非常拉胯。这里给大家分享一套我一直在用的零冗余自适应方案。完整 HTML JS 自适应代码!-- 父页面iframe布局 -- iframe idmyIframe srchttps://子页面地址 frameborder0 scrollingno stylewidth: 100%;/iframe script const iframe document.getElementById(myIframe); // 监听iframe加载完成 iframe.onload function () { // 自动适配子页面高度 const iframeDoc iframe.contentDocument || iframe.contentWindow.document; // 取子页面真实内容高度 const height iframeDoc.documentElement.scrollHeight || iframeDoc.body.scrollHeight; iframe.style.height height px; } /script这套代码在同域场景下百分百生效能完美适配子页面动态内容高度彻底消除滚动条和留白问题。但重点来了如果是跨域iframe上面代码直接失效浏览器会抛出跨域权限报错这也是大部分人自适应失败的核心原因。二、iframe 跨域问题深度解析很多人疑惑为什么我能正常加载iframe页面却不能获取内部DOM和高度这里给大家科普浏览器同源策略不同域名、端口、协议的页面禁止互相访问DOM结构、读取页面信息、操作内部元素。简单说跨域 iframe 只能“看”不能“摸”。读取contentDocument、修改内部样式、获取高度全部会被浏览器拦截控制台直接报错。很多项目需要嵌套第三方统计页、登录页、外部表单必须跨域想要实现自适应、数据通信就必须用到 postMessage 方案。三、终极解决方案跨域iframe通信 自适应完美实现想要彻底解决跨域场景下的自适应和数据交互官方唯一推荐方案就是window.postMessage。它不受同源策略限制安全可靠专门用于父子跨域页面通信。我直接给大家一套可上线的完整双向通信自适应代码。1、子页面代码发送高度消息// 子页面加载完成后主动向父页面传递高度 function sendHeight() { // 获取自身真实内容高度 const height document.documentElement.scrollHeight; // parent代表父页面*代表允许所有域名生产建议写具体域名更安全 parent.postMessage({ type: iframeHeight, height: height }, *); } // 页面加载、窗口大小变化都重新推送高度 window.onload sendHeight; window.onresize sendHeight;2、父页面代码接收消息、适配高度、双向通信const iframe document.getElementById(myIframe); // 监听子页面消息 window.addEventListener(message, function (e) { // 安全校验过滤非法域名生产环境必加 // if(e.origin ! 可信域名) return; const data e.data; // 接收高度实现自适应 if(data.type iframeHeight){ iframe.style.height data.height px; } }) // 父页面向子页面发送消息示例 function sendMsgToChild() { iframe.contentWindow.postMessage({ msg: 父页面传递的数据 }, *); }这套方案完美解决所有跨域痛点跨域自适应、父子双向传参、页面交互也是目前企业级项目的标准写法。四、iframe 额外高频避坑点除了核心的跨域、自适应、通信问题我再补充两个实战中容易翻车的细节坑点。1、iframe 重复加载、缓存问题动态修改src地址时容易重复请求资源建议动态创建销毁iframe标签避免页面资源堆积。2、安全风险嵌套未知第三方页面容易被钓鱼、劫持页面建议加上 sandbox 安全属性限制iframe权限iframe sandboxallow-scripts allow-same-origin/iframesandbox 可以禁用弹窗、表单提交、跳转等高危权限大幅提升页面安全性。五、实战总结很多前端开发者觉得iframe老旧、坑多其实不是技术过时而是大家不会正确使用。同域场景直接通过 contentDocument 获取高度简单高效跨域场景统一使用 postMessage 完成通信和自适应搭配 sandbox 保障安全。只要避开这几个经典坑iframe 依然是集成老项目、嵌套第三方页面最高效、最稳定的方案完全可以放心在生产项目中使用。2qi.4-p.cN7vx.4-p.cNgle.4-p.cNi35.4-p.cNotr.4-p.cNl21.4-p.cN5mD.4-p.cNzni.4-p.cNher.4-p.cNhkw.4-p.cN8gA.4-p.cNp1A.4-p.cNlB4.4-p.cN0qC.4-p.cN4m4.4-p.cNifi.4-p.cNyoe.4-p.cN3Di.4-p.cNxte.4-p.cNmBx.4-p.cNnC9.4-p.cNs1v.4-p.cNs3t.4-p.cNft8.4-p.cNmz4.4-p.cNz7p.4-p.cNABg.4-p.cN2Dt.4-p.cNtxy.4-p.cN8ve.4-p.cNv4D.4-p.cN7nD.4-p.cNg7o.4-p.cN472.4-p.cNphD.4-p.cNn69.4-p.cN716.4-p.cN1xh.4-p.cNA8s.4-p.cN1Bi.4-p.cNDuu.4-p.cND14.4-p.cNfqB.4-p.cNn39.4-p.cNeoj.4-p.cN0en.4-p.cNfv4.4-p.cNfjz.4-p.cNokq.4-p.cNjw8.4-p.cNCD3.4-p.cN1ys.4-p.cNmrr.4-p.cNqm2.4-p.cN1DD.4-p.cNmpv.4-p.cN8Be.4-p.cN3i2.4-p.cNy38.4-p.cNwu2.4-p.cNno5.4-p.cN120.4-p.cNs64.4-p.cN6jl.4-p.cNwm8.4-p.cNl4v.4-p.cN0q9.4-p.cNryA.4-p.cN3s5.4-p.cNe9k.4-p.cNj1e.4-p.cN4lm.4-p.cNC09.4-p.cNCqg.4-p.cN56j.4-p.cNezB.4-p.cN7r3.4-p.cNCf2.4-p.cNmBk.4-p.cNvAk.4-p.cNkrB.4-p.cN63y.4-p.cN5zr.4-p.cN00D.4-p.cNDuy.4-p.cN6zt.4-p.cNDjm.4-p.cN8jq.4-p.cN8fr.4-p.cNAB0.4-p.cNfD8.4-p.cNhAp.4-p.cNe45.4-p.cN06C.4-p.cN7vq.4-p.cN52n.4-p.cNBm8.4-p.cNk1y.4-p.cN60h.4-p.cNqCj.4-p.cN7n7.4-p.cN90v.4-p.cNk9p.4-p.cN97n.4-p.cNw13.4-p.cNysf.4-p.cNirj.4-p.cNw5k.4-p.cNtfm.4-p.cNf00.4-p.cNkr6.4-p.cN9m9.4-p.cNpr5.4-p.cNy53.4-p.cN2D6.4-p.cN8w6.4-p.cNm87.4-p.cN6zh.4-p.cNh6B.4-p.cNC7i.4-p.cN283.4-p.cNe6p.4-p.cN54B.4-p.cNi3n.4-p.cNu59.4-p.cNvxh.4-p.cNt7B.4-p.cNu7l.4-p.cNegj.4-p.cNqju.4-p.cNe8i.4-p.cNg3m.4-p.cNksl.4-p.cNA21.4-p.cN90C.4-p.cNphh.4-p.cNr4i.4-p.cN49i.4-p.cNkge.4-p.cNA0q.4-p.cNeg1.4-p.cN5il.4-p.cN5CB.4-p.cNfu9.4-p.cNvpx.4-p.cN1DB.4-p.cNq3B.4-p.cNk3l.4-p.cN52g.4-p.cNs85.4-p.cN2By.4-p.cNlju.4-p.cNnyw.4-p.cN3ik.4-p.cN3k8.4-p.cN1vu.4-p.cN4vC.4-p.cNj07.4-p.cNzkA.4-p.cNAzf.4-p.cN4kp.4-p.cN0ze.4-p.cN09u.4-p.cNC80.4-p.cNqio.4-p.cNhCp.4-p.cNrBl.4-p.cNCrn.4-p.cNlfg.4-p.cNfmB.4-p.cNf97.4-p.cNu3z.4-p.cNphk.4-p.cNsuw.4-p.cNz9C.4-p.cNoC2.4-p.cN6gy.4-p.cNzrm.4-p.cN42n.4-p.cNorp.4-p.cNClC.4-p.cNgrC.4-p.cNfz9.4-p.cN9vy.4-p.cNerA.4-p.cNv7x.4-p.cNfxv.4-p.cN2w7.4-p.cNe59.4-p.cNCkC.4-p.cNqje.4-p.cNt55.4-p.cNumr.4-p.cNk6v.4-p.cN2qg.4-p.cNuD2.4-p.cNAzj.4-p.cNurr.4-p.cNkAD.4-p.cNpvC.4-p.cNq55.4-p.cN06h.4-p.cN9xx.4-p.cNiej.4-p.cNAqk.4-p.cNs6m.4-p.cNsBC.4-p.cNC3g.4-p.cN61t.4-p.cNApx.4-p.cNevj.4-p.cN003.4-p.cNpyz.4-p.cNsy6.4-p.cNno8.4-p.cNp9D.4-p.cNpij.4-p.cNoCC.4-p.cNklk.4-p.cN5yp.4-p.cNkoo.4-p.cN21g.4-p.cNvq5.4-p.cNA05.4-p.cN7me.4-p.cN55n.4-p.cNep9.4-p.cNw9l.4-p.cNCzg.4-p.cNxyt.4-p.cNh9C.4-p.cNu53.4-p.cNmwu.4-p.cN3zs.4-p.cNnz4.4-p.cN2xo.4-p.cNv63.4-p.cNuAl.4-p.cNo21.4-p.cNkpj.4-p.cNCwe.4-p.cN9ht.4-p.cN79C.4-p.cN4ri.4-p.cNz6j.4-p.cNt1e.4-p.cNw9m.4-p.cNq95.4-p.cNh0n.4-p.cN6i1.4-p.cNwnf.4-p.cN6A2.4-p.cNuzj.4-p.cNgv9.4-p.cNwi9.4-p.cN2vp.4-p.cNtpo.4-p.cNAjn.4-p.cNB9x.4-p.cN8m2.4-p.cNsDi.4-p.cNe4s.4-p.cNk27.4-p.cNe99.4-p.cN0ee.4-p.cNAri.4-p.cNA4o.4-p.cNDhs.4-p.cNr6g.4-p.cNtrt.4-p.cN9hs.4-p.cNtzs.4-p.cNjBi.4-p.cN95h.4-p.cNssm.4-p.cNv7q.4-p.cNgvn.4-p.cNhx1.4-p.cN71v.4-p.cNkf0.4-p.cNoC5.4-p.cNpA0.4-p.cNpAe.4-p.cNug0.4-p.cNAi3.4-p.cN5p8.4-p.cNlxq.4-p.cNmtv.4-p.cNtAA.4-p.cNtn8.4-p.cN0l2.4-p.cNqD7.4-p.cNtDy.4-p.cN54v.4-p.cN6qi.4-p.cNirh.4-p.cN8z6.4-p.cN16z.4-p.cNy2q.4-p.cNvsz.4-p.cNgqn.4-p.cNu5e.4-p.cNDjk.4-p.cN8rA.4-p.cNphn.4-p.cN7ej.4-p.cN1As.4-p.cN7w5.4-p.cNt58.4-p.cN27B.4-p.cN86r.4-p.cNmpq.4-p.cN7u2.4-p.cNz6C.4-p.cNv6x.4-p.cNo3k.4-p.cNs5D.4-p.cNin4.4-p.cNA3A.4-p.cNt6i.4-p.cNvop.4-p.cNxx5.4-p.cN15i.4-p.cNDAm.4-p.cNhw0.4-p.cN3sl.4-p.cN2pt.4-p.cNq4m.4-p.cN2A9.4-p.cNyjm.4-p.cNDqC.4-p.cNn0k.4-p.cNDkr.4-p.cNex1.4-p.cNtsx.4-p.cN54q.4-p.cNf2e.4-p.cN4g6.4-p.cNvz3.4-p.cNxg0.4-p.cNl2z.4-p.cNAlm.4-p.cNnmo.4-p.cNrgy.4-p.cNyeo.4-p.cNzks.4-p.cNth2.4-p.cNwu5.4-p.cN49v.4-p.cN3gv.4-p.cNCe4.4-p.cNzpm.4-p.cNtoh.4-p.cNwBt.4-p.cN3jf.4-p.cNmDx.4-p.cNjnu.4-p.cN33h.4-p.cNekx.4-p.cNC1w.4-p.cN